angularJS 过滤器-优快云博客

本文详细介绍了AngularJS中的内置过滤器及其使用方法，并提供了自定义过滤器的具体实现步骤，包括控制器、服务及过滤器的注册过程。

过滤器：

<div>
        <h3>过滤器种类分一下几种：</h3>
        <span class="lead">
            number | currency | filter | lowercase | uppercase | orderby
        </span>
        <hr/>
    </div>

    <!-- 过滤数字 -->
    {{ 3125213128.38 | number:3}}
    <br/>
    {{1325364212421 | currency:'￥'}}
    <br/>
    {{'asdfafGAAaa' | lowercase}}
    <br/>
    {{'asdfafGAAaa' | uppercase}}


    <hr/>
    <span class="h3">
        <!--过滤为数字-->
        {{12345678 | number}}
        <br/>
        <!--四舍五入-->
        {{1234.5678 | number:3}}
    </span>
    <br/>
    <br/>
    <span class="h3">
        {{1234567 | currency}}
         <br/>
        {{1234567 | currency:'￥'}}
    </span>
    <br/>
    <br/>
    <span class="h3">
        <!--格式化时间-->
        {{myDate | date}}
         <br/>
        medium:     {{myDate | date:'medium'}}
         <br/>
        short:      {{myDate | date:'short'}}
         <br/>
        fullDate:   {{myDate | date:'fullDate'}}
         <br/>
        longDate:   {{myDate | date:'longDate'}}
         <br/>
        mediumDate: {{myDate | date:'mediumDate'}}
         <br/>
        mediumTime: {{myDate | date:'mediumTime'}}
    </span>
    <br/>
    <br/>
    <span class="h3">

        <!--数组类型的过滤器-->
        {{ [1,2,3,4,5,6,7,8] | limitTo:'-2'}}
         <br/>

    </span>
    <br/>
    <br/>
    <span class="h3">
        {{city}}
        <br/>
        <br/>
        {{ city | filter:'北京'}}

         <br/>
         <br/>
        {{ city | orderBy:'name'}}

    </span>
<script>
    angular.module('myApp',[])
            .factory('myData',function(){
                return {
                    city:[
                        {name:'1',py:'shandong'},
                        {name:'2',py:'beijing'},
                        {name:'5',py:'shanghai'},
                        {name:'4',py:'北京'}
                    ]
                }
            })
            //在控制器中使用过滤器
            .controller('filterCtrl',function($scope,myData,$filter){
                $scope.myDate = new Date();
                $scope.city = myData.city;

                var number1 = $filter('number')(12345678);
                var jsonStr = $filter('json')($scope.city)
                console.log($scope.city)
                console.log('格式化后'+jsonStr)
                console.log('格式化后'+number1)
            })
</script>

自定义过滤器：

首先，还是要先在页面引入angularjs。

然后开始编写js代码，

1.注册控制器：

<script>
     angular.module('myApp',[],function(<span style="font-family: Arial, Helvetica, sans-serif;">$controllerProvider</span><span style="font-family: Arial, Helvetica, sans-serif;">,$provide,$filterProvider){</span>
         /*注册控制器*/
         $controllerProvider.register('ctrlName', function ($scope,serviceName) {
             $scope.type = '通过provider注册的控制器';
             $scope.objs = serviceName;
         });
</script>

不要忘记在 angular.module('myApp',[],function(){ }); 的function中传递参数。

2.创建服务：

在服务（service）中穿件一个数组，

 /*创建服务*/
         $provide.service('serviceName', function () {
             return [
                 {name:'xiaoming1',age:18},
                 {name:'xiaoming2',age:28},
                 {name:'xiaoming3',age:38}
             ]
         });

3.注册过滤器：

第一种写法，

/*注册过滤器*/
         $filterProvider.register('filterName', function () {
             return function (objs) {
                 var newResult = [];
                 angular.forEach(objs, function (obj) {
                     if(obj.age<30){
                         newResult.push(obj)
                     }
                 });
                 return newResult;
             }
         })
     })

第二种写法，

.filter('filterXm',function(){
                 return function (objs) {
                     var newResult = [];
                     angular.forEach(objs, function (obj) {
                         if(obj.name == 'xiaoming2'){
                             newResult.push(obj)
                         }
                     });
                     return newResult;
                 }
             })

js的整体代码为：

<script>
     angular.module('myApp',[],function($controllerProvider,$provide,$filterProvider){
         /*注册控制器*/
         $controllerProvider.register('ctrlName', function ($scope,serviceName) {
             $scope.type = '通过provider注册的控制器';
             $scope.objs = serviceName;
         });
         /*创建服务*/
         $provide.service('serviceName', function () {
             return [
                 {name:'xiaoming1',age:18},
                 {name:'xiaoming2',age:28},
                 {name:'xiaoming3',age:38}
             ]
         });
         /*注册过滤器*/
         $filterProvider.register('filterName', function () {
             return function (objs) {
                 var newResult = [];
                 angular.forEach(objs, function (obj) {
                     if(obj.age<30){
                         newResult.push(obj)
                     }
                 });
                 return newResult;
             }
         })
     })
             .filter('filterXm',function(){
                 return function (objs) {
                     var newResult = [];
                     angular.forEach(objs, function (obj) {
                         if(obj.name == 'xiaoming2'){
                             newResult.push(obj)
                         }
                     });
                     return newResult;
                 }
             })
</script>

html页面代码：

<div ng-controller="ctrlName">
    {{type}}
    <br/>
    {{objs}}

    <ul class="list-group">
        <li class="list-group-item" ng-repeat="obj in objs | filterName | filterXm">
            {{obj.name+" , "+obj.age}}
        </li>
    </ul>
</div>

{{type}}表达式来测试一下创建的控制器，