过滤器 #9

Wscats · 2016-08-14T04:24:09Z

自定义过滤器

我们可以使用filter函数自定义一个过滤器，filter函数的第一个参数是过滤器到时候再DOM中要使用的名字，第二个参数是定义一个执行过滤操作的函数，返回的要是一个函数

app.filter("wsscat",function(){
            var func = function(input, bool){
                var out;
                console.log(input);
                console.log(bool);
            }
            return func;
})

我们就可以在DOM中使用这个过滤器，这里执行的时候会输出text的值，过滤器中的返回函数第一个参数就是我们传进去的text值，第二个参数是传递一个值，可以是布尔值，字符串，数字等等
<p>{{text|wsscat}}</p>
<p>{{text|wsscat:true}}</p>

所以打印的结果为

console.log(input);//text的值
console.log(bool);//true

在控制器中使用过滤器服务

往控制器中注入$filter服务
$filter(过滤器名字)(需要被过滤的参数,过滤器设置的参数)

app.controller('filterCtrl',function($scope,$filter){
            $scope.name = 'wsscat';
            //$filter第一个括号是过滤器的名字 第二个括号是接受过滤的参数和过滤器设置的参数
            $scope.price = $filter("currency")(123,'#');
            $scope.date = $filter("date")(new Date(),'yyyy-MM-dd hh:mm:ss');
})

The text was updated successfully, but these errors were encountered:

Wscats · 2016-09-21T15:45:48Z

自定义过滤器，根据输入的关键词，全文搜索，如果有对应的结果那就让它变成红色背景

<!DOCTYPE html>
<html ng-app="wsscat">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="angular.js"></script>

    <body ng-controller="filterCtrl">
        <input ng-model="red" ng-keyup="makeRed()" />
        <div ng-bind-html="htmlSced"></div>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('filterCtrl', function($scope, $filter, $sce) {
            var html = "<p>123</p>";
            //刚进入时候显示的DOM结构
            $scope.htmlSced = $sce.trustAsHtml(html)
            $scope.makeRed = function() {
                $scope.html = $filter("wsscat")(html, $scope.red);
                $scope.htmlSced = $sce.trustAsHtml($scope.html);
                //如果没有任何输入就变成原来的DOM结构
                if(!$scope.htmlSced) {
                    $scope.htmlSced = $sce.trustAsHtml(html)
                }
            }
        })
        app.filter("wsscat", function() {
            var func = function(input, val) {
                //判断筛选结果是否为空
                if(val) {
                    var output;
                    //把字符串<p>123</p>根据1的位置，拆分成["<p>", "23</p>"]
                    str = input.split(val);
                    //把1添加红色的背景色
                    var addRed = '<span style="background-color:red">' + val + '</span>';
                    //将1插回DOM中，生成一个新的DOM结构
                    output = str.join(addRed)
                    return output;
                }
            }
            return func;
        })
    </script>
</html>

Wscats · 2016-11-23T14:34:29Z

AngularJS权威教程第7章过滤器filters

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

过滤器 #9

过滤器 #9

Wscats commented Aug 14, 2016 •

edited

Wscats commented Sep 21, 2016

Wscats commented Nov 23, 2016

过滤器 #9

过滤器 #9

Comments

Wscats commented Aug 14, 2016 • edited

自定义过滤器

在控制器中使用过滤器服务

Wscats commented Sep 21, 2016

Wscats commented Nov 23, 2016

Wscats commented Aug 14, 2016 •

edited