angularjs學習，本次主要學習練習其filter過濾器、limitTo過濾器、orderyBy過濾器，及其自定義過濾器的 ...
您好，我是一名後端開發工程師，由於工作需要，現在系統的從0開始學習前端js框架之angular，每天把學習的一些心得分享出來，如果有什麼說的不對的地方，請多多指正，多多包涵我這個前端菜鳥，歡迎大家的點評與賜教。謝謝！
第三天，過濾器第二篇---filter過濾器及其自定義過濾器
一、filter過濾器
filter過濾器我的理解就是一個篩選過濾器，主要是對集合數據進行篩選，其篩選條件支持字元串、對象、函數
字元串：篩選邏輯就是篩選出屬性值包含該字元串的對象集合
同時還可以接受一個bool變數的參數（如果為true按照等於篩選）
格式為：{{被篩選的集合對象|filter:'要篩選的字元串':是否嚴格等於篩選}}
對象：篩選邏輯就是篩選出集合中包含該鍵值對對應的值的對象集合
格式為：{{被篩選的集合對象|filter:‘篩選條件對象’}}
函數：可以根據需要在函數裡面編寫篩選邏輯（有點自定義過濾器的效果）
格式為：{{被篩選的集合對象|filter:‘篩選自定義函數名稱’}}
關於filter篩選的小練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> <h1>filter 過濾器練習</h1> <div>屬性值中包含hong的數據集合：{{dateList|filter:"hong"}}</div> <div>age中包含hong的數據集合：{{dateList|filter:'xuhongyuan':true }}</div> <div>age中包含hong的數據集合：{{dateList|filter:'xuhongyuan':false }}</div> <div>age中包含hong的數據集合：{{dateList|filter:{name:'xuhongyuan'} }}</div> <div>age中包含hong的數據集合：{{dateList|filter:fun }}</div> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.dateList = [ { name: "xurong", age: 35 }, { name: "xuyanzi", age: 32 }, { name: "xuhongyuan", age: 30 }, { name: "xuhongyuanTest", age: 30 }, { name: "Xuhongyuan", age: 30 }, { name: "xuhongyong", age: 28 } ]; $scope.fun = function (e) { return e.age > num; } }); </script>
二、json 過濾器
json過濾器可以將一個JSON或JavaScript對象轉換成字json符串
三、limitTo 過濾器
limitTo過濾器實際上就是對字元串進行截取
如果參數為正，那麼從字元串前面開始截取，如果參數為負，那麼從字元串後面開始截取
格式：{{被截取的字元串|limitTo:截取長度}}
limitTo過濾器出了使用於字元串外，數組也是同樣的原理
四、orderBy 過濾器
orderBy過濾器可以用表達式對指定的數組進行排序。預設升序
orderBy可以接受兩個參數
第一個是必需的（排序欄位及其方式，可以接收一個函數）
第二個是可選的（boolean，是否逆向，如果設置為true，則倒序）
關於json 、limitTo、orderBy過濾器的練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> <h1>json 過濾器練習</h1> json過濾器可以將一個JSON或JavaScript對象轉換成字元串。這種轉換對調試非常有幫助：<br /> {{ dateList | json }} <h1>limitTo 過濾器練習</h1> limitTo過濾器實際上就是對字元串進行截取，如果參數為正，那麼從字元串前面開始截取，如果參數為負，那麼從字元串後面開始截取<br /> limitTo過濾器出了使用於字元串外，數組也是同樣的原理<br /> <div>字元串前面截取保留10位：{{message|limitTo:10}}</div> <div>字元串後面截取保留7位：{{message|limitTo:-7}}</div> <div>數組前面截取保留2位：{{dateList|limitTo:2}}</div> <div>數組後面截取保留2位：{{dateList|limitTo:-2}}</div> <h1>orderBy 過濾器練習</h1> orderBy過濾器可以用表達式對指定的數組進行排序。預設升序<br /> orderBy可以接受兩個參數，第一個是必需的（排序欄位及其方式，可以接收一個函數），第二個是可選的（boolean，是否逆向，如果設置為true，則倒序）。<br /> <div>數組根據年齡升序：{{dateList|orderBy:"age"}}</div> <div>數組根據年齡降序：{{dateList|orderBy:"age":true}}</div> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.dateList = [ { name: "xurong", age: 35 }, { name: "xuyanzi", age: 32 }, { name: "xuhongyuan", age: 30 }, { name: "xuhongyuanTest", age: 30 }, { name: "Xuhongyuan", age: 30 }, { name: "xuhongyong", age: 28 } ]; $scope.message = "大家好好，我是馬良，很高興見到大家"; }); </script>
五、自定義 過濾器
自定義過濾器可以根據實際業務需要編寫對於的過濾器邏輯
定義格式為：
app.filter("自定義過濾器名稱", function () {
return function (待過濾對象,參數1,參數2....) {
篩選邏輯。。。。
return 最終篩選的符合要求的結果
}
調用方式：{{待過濾對象|自定義過濾器名稱:參數1:參數2....}}
自定義過濾器練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> <h1>自定義 過濾器</h1> <div>實現第一個字母大小：{{message|lowercase|myFilter}}</div> <div>對數據集合按照自定義集合進行篩選：{{dateList|myFilterObj:29}}</div> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.dateList = [ { name: "xurong", age: 35 }, { name: "xuyanzi", age: 32 }, { name: "xuhongyuan", age: 30 }, { name: "xuhongyuanTest", age: 30 }, { name: "Xuhongyuan", age: 30 }, { name: "xuhongyong", age: 28 } ]; $scope.message = "hello,my name is XuHongYuan!"; }); app.filter("myFilter", function () { return function (input) { if (input) { return input[00].toUpperCase() + input.slice(1); } } }); app.filter("myFilterObj", function () { return function (input,angNum) { var outPut = []; angular.forEach(input, function (obj) { if (obj.age > angNum) { outPut.push(obj); } }) return outPut; } }) </script>
好了，時間也不早了，明天還要上班，今天就先學到這，明天繼續學習表單驗證，謝謝大家支持與鼓勵。
