【学】AngularJS日记（4）- 过滤器的使用

过滤器：

过滤器中的 |json，可以使原来的json数据输出时按照换行的样式
过滤器 | limitTo:2 可以截取字符串或者数组的前2位
过滤器 | orderBy 可以进行排序，加入json里的key，就会根据这个key来排序，再加入一个参数true，就能逆排序

除了在标签里或者model里用过滤器，还可以在写JS或者JQ的区域通过

给controller注入$filter来直接在控制器里直接使用过滤器

<script type="text/javascript">

    var app = angular.module('myApp',[]);

    app.controller('cont1',['$scope','$filter',function($scope,$filter){

        $scope.name = $filter('uppercase')('hello'); //将hello全部转成大写

        $scope.number = $filter('number')('12392.8374',1); //限制一位小数

    }]);

</script>

</head>

<body ng-controller="cont1">

{{name}}

{{number}}

</body>

我们也可以通过模块对象下的filter()方法，自定义一个过滤器

var app = angular.module('myApp',[]);

app.filter('firstUpper',function(){ //在app模块下调用filter方法来自定义过滤器，名字是firstUpper

    return function(str，num){

        return str.charAt(0).toUpperCase()+str.substring(1);

    }

    //这里的str，其实就是被使用过滤器的那个元素，这个过滤器的功能是将字符串的第一个字母大写

    //另外，除了str，还可以传第二个参数，其实就是过滤器里用：隔开的第二个参数，当然，还可以加第三个或者更多

});

app.controller('cont1',['$scope',function($scope){

    $scope.name = 'hello';

}]);

</script>

</head>

<body ng-controller="cont1">

{{name|firstUpper}}

</body>

同样，自定义的过滤器也可以直接在controller里的js中通过服务的方式调用，接着上面的例子

app.controller('cont1',['$scope','$filter',function($scope,$filter){

    $scope.name = $filter('firstUpper')('hello'); //在controller中使用自定义的过滤器

}]);

下面这个例子是通过ng-repeat和使用自带的过滤器来控制一个表格里的数据



var app = angular.module('myApp',[]);

app.controller('cont1',['$scope','$filter',function($scope,$filter){

    $scope.data = [

        {'name':'Victor','age':33},

        {'name':'Mary','age':30},

        {'name':'Qinyu','age':4},

        {'name':'Yushuang','age':58},

        {'name':'Yongpin','age':62}

    ];

    $scope.onOff = true; //定义一个scope下的变量，来实现正序和反序的切换

    $scope.myOrder = function(str){

        if ($scope.onOff) {

            $scope.data =  //使用angular自带的orderBy过滤器， $filter('orderBy')($scope.data,str,true);

        }else{

            $scope.data = $filter('orderBy')($scope.data,str);

        }

        $scope.onOff = !$scope.onOff;

    };

}]);

</script>

</head>

<body ng-controller="cont1">

<table border="1">

<thead>

<tr>

    <th ng-click="myOrder('name')">姓名</th> <!--点击这个表头标题，可以调用myOrder函数来排序，当然，可以根据传参的不同来根据不同关键字排序-->

    <th ng-click="myOrder('age')">年龄</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="item in data">

    <td>{{item.name}}</td>

    <td>{{item.age}}</td>

</tr>

</tbody>

下面这个例子是在上面的基础上增加一个搜索功能，用到的技能有

通过将原始数据保留，model的数据被赋值原始数据，这样筛选filter后的数据不会改变原始数据
过滤器中filter方法的使用

    <script type="text/javascript">

        var app = angular.module('myApp',[]);

        app.controller('cont1',['$scope','$filter',function($scope,$filter){

            $scope.oriData = [ //这是原始数据，不要在使用filter方法时去改变它

                {'name':'Victor','age':33},

                {'name':'Mary','age':30},

                {'name':'Qinyu','age':4},

                {'name':'Yushuang','age':58},

                {'name':'Yongpin','age':62}

            ];

            $scope.data = $scope.oriData; //可以在这里将原始数据赋值给model数据data

    //这里添加筛选功能，使用filter这个方法，第一个参数放要从哪个数据源中筛选，第二个参数写的是根据哪个关键字

            $scope.mySearch = function(){

                $scope.data = $filter('filter')($scope.oriData,$scope.searchContent);

            };

        }]);

    </script>

</head>

<body ng-controller="cont1">

<!--这里要给输入框添加ng-model要写搜索的关键字-->

<input type="text" ng-model="searchContent"><button ng-click="mySearch()">搜索</button>

<table border="1">

......

......

巴特西

【学】AngularJS日记（4）- 过滤器的使用

最新文章

热门文章