關於ng的過濾器的詳細解釋angular-filter


在使用ng框架做項目的時候,我們可能會使用到ng自帶的過濾器,來進行數據的篩選

一:ng自帶的過濾器:currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter

過濾器有兩種使用方法:第一種,頁面是直接使用;第二種,js中使用

以上的過濾器的使用時偏簡單的,查看文檔對你很有用

這里,我們來講解一下 上面的簡單中的很少用到的json,filter

關於json過濾器的作用是將一個javaScript對象轉化為一個JSON字符串:

 demo: 

  <div>
     {{ {name: 'Ari', City: 'SanFrancisco'} | json }} 
  </div>

頁面顯示的效果是:{ "name": "Ari", "City": "SanFrancisco" }

關於filter過濾器的用法:

 頁面中直接使用

 <div>
    {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}
  </div>

 頁面顯示的效果是:["aaassddd","kkklljj"]

 舉一個在js中使用的demo吧

<!doctype html>
<html lang="en" ng-app="myApp">
 <head>
   <script src="angular.js"></script>    
 </head>
 <body>
     <div ng-controller="filterCtrl">
                 {{name}}
                 {{dollar}}
                 {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
                 {{ {name: 'Ari', City: 'SanFrancisco'} | json }}
                 {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}
       </div>
 </body>
</html>
<script>
         angular.module("myApp",[])
                 .controller("filterCtrl",["$scope","$filter","currencyFilter",function(s,f,c){//方式一:直接使用$filter, 方式二:使用***Filter 
                      s.name=f('lowercase')("ARTDF");  
                      s.dollar=c(234);
       }])
</script>

:講解了ng的內置過濾器,我們來 學學如何自定義過濾器

    ng的自定義過濾器返回的是一個函數,我們可以在這個函數里進行系列操作

   js:

 var myFilter=angular.module("filterModule",[])
  .filter("filter1",function(){
    return function(item){
       return item+'ABCDE';
    }
  });

html:

<div>{{432432423432| date:"yyyy-MM-dd"|filter1}}</div>

結果:1983-09-15ABCDE

demo2:自定義過濾器(直接上例子)

<!doctype html>
<html lang="en" ng-app="myApp">
 <head>
  <script src="lodash.js"></script>
    <script src="angular.js"></script>
 </head>
 <body ng-controller="myCtrl">
      <div ng-repeat="t in list | filterByObj:arr">{{t}}</div>
 </body>
</html>
<script>
  var app=angular
        .module("myApp",[])
           .controller("myCtrl",function($scope){
                 $scope.list=[1,3,4,5,12,23,6];
                 $scope.arr=[6,5,3,1];
           })
        .filter("filterByObj",[function(){
                 return function(list,obj){
                      var result=[];
                      angular.forEach(list,function(item){
                            var isEqual=true;
                            for(var e in obj){
                                  if(item==obj[e]){
                                       result.push(item);
                                  }
                            }
                      });
           return result;
                 }
           }]);
</script>

 結果:1,3,5,6

借鑒資源鏈接:http://www.oschina.net/translate/angularjs-filter-creating-custom-filter


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM