您好，我是一名后端開發工程師，由於工作需要，現在系統的從0開始學習前端js框架之angular，每天把學習的一些心得分享出來，如果有什么說的不對的地方，請多多指正，多多包涵我這個前端菜鳥，歡迎大家的點評與賜教。謝謝！
第二天，幾天主要學angularjs中的過濾器
一、簡介
angular js 的過濾器簡單的理解就是格式化數據，當數據格式不滿足要求時不會報錯，直接展示空
angularjs內置了一些常用的過濾器，當然也可以根據需要自定義過濾器
二、過濾器的使用方式有兩種：
1、在html中模板數據綁定內使用：
其使用方式是：在綁定模板中通過符號“|”來調用過濾器，格式為：{名稱|過濾器名稱}}
如果有多個過濾器，那么不同的過濾器間也同樣通過符號“|”相連接
每一個過濾器還可以添加約束條件，約束條件通過符號“:”構成，多個約束條件同樣用“:”相連接。
{名稱|過濾器1：約束條件1：約束條件2|過濾器2:約束條件....}}
如果有多個過濾器，那么不同的過濾器間也同樣通過符號“|”相連接
每一個過濾器還可以添加約束條件，約束條件通過符號“:”構成，多個約束條件同樣用“:”相連接。
{名稱|過濾器1：約束條件1：約束條件2|過濾器2:約束條件....}}
2、在js中通過$filter來調用：
其使用格式為$filter("過濾器名稱:約束：約束|過濾器2:約束.....")
3、小練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <div ng-controller="myContro"> <h1>angular js 之過濾器</h1> <div>angular js 的過濾器簡單的理解就是格式化數據，當數據格式不滿足要求時不會報錯，直接展示空<br /> angularjs內置了一些常用的過濾器，當然也可以根據需要自定義過濾器 </div> <div> 過濾器的使用方式有兩種：<br /> <h4>在html中模板數據綁定內使用：</h4><br /> 其使用方式是：在綁定模板中通過符號“|”來調用過濾器，格式為：{名稱|過濾器名稱}}<br /> 如果有多個過濾器，那么不同的過濾器間也同樣通過符號“|”相連接<br /> 每一個過濾器還可以添加約束條件，約束條件通過符號“:”構成，多個約束條件同樣用“:”相連接。<br /> {名稱|過濾器1：約束條件1：約束條件2|過濾器2:約束條件....}} <h4>在js中通過$filter來調用：</h4><br /> 其使用格式為$filter("過濾器名稱:約束：約束|過濾器2:約束.....") </div> <div> <h3>下面通過一個大小寫轉換的例子來進行練習</h3> <h4>過濾器的兩種使用方式</h4> <div>賬號：<input type="text" ng-model="user.acount" placeholder="請輸入賬號信息..."/></div> <div>html模板中通過過濾器轉為大寫:{{user.acount|uppercase}}</div> <div>js代碼通過$filter調用轉化為小寫{{user.acountL}}</div> <h4>過濾器添加約束條件</h4> <div>體重：<input type="text" ng-model="user.weight" placeholder="請輸入體重，保留兩位有效數字"></div> <div>對體重添加數字過濾器，並且結果展示兩位小數：{{user.weight|number:2}}</div> </div> </div> </body> </html> <script src="../Scripts/angular.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller("myContro", function ($scope, $filter) { $scope.user = { acount:"", acountL:"" } $scope.nowDate = new Date(); ///// 對模型數據user.acount添加一個偵聽其改變 $scope.$watch("user.acount", function (newvalue, oldvalue) { if (newvalue != oldvalue) { $scope.user.acountL = $filter("lowercase")($scope.user.acount) } }); }); </script>
三、內置過濾器
1、貨幣過濾器，關鍵詞：currency
貨幣過濾器的實現效果是，在被過濾的學習前加上貨幣符號，默認貨幣符號為，當然可以自定義貨幣符號
2、時間過濾器，關鍵詞：date
時間過濾器顧名思義就是格式化時間。時間格式的表達式和后端語言一直，簡單的羅列回顧幾個關鍵的表示方式
yy:代表年份的最后兩位，如18
yyyy:代表完整的4位年份
MM:代表月份
dd:代表日期
hh:代表時間12小時制
HH:代表時間24小時制
mm:代表分鍾
ss:代表秒
有了上面的基礎，我們要對一個時間進行格式就可以根據需要自由組合了
比如我們要格式化為：xxxx年xx月xx日，其格式為：yyyy年MM月dd日
3、針對以上兩個內置過濾器做一個小練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <div ng-controller="myContro"> <h1>angular js 之過濾器</h1> <div>angular js 的過濾器簡單的理解就是格式化數據，當數據格式不滿足要求時不會報錯，直接展示空<br /> angularjs內置了一些常用的過濾器，當然也可以根據需要自定義過濾器 </div> <div style="margin-top:60px;"> <h1>內置過濾器</h1> <h3>貨幣過濾器，關鍵詞：currency</h3> <div>貨幣過濾器的實現效果是，在被過濾的學習前加上貨幣符號，默認貨幣符號為，當然可以自定義貨幣符號</div> <div> 金額：<input type="text" ng-model="user.price" placeholder="請輸入金額" /> <div>默認貨幣展示結果:{{user.price|number:2|currency}}</div> <div>自定義貨幣展示結果:{{user.price|number:2|currency:'人民幣'}}</div> </div> <h3>時間過濾器，關鍵詞：date</h3> 時間過濾器顧名思義就是格式化時間。<br /> 時間格式的表達式和后端語言一直，簡單的羅列回顧幾個關鍵的表示方式<br /> yy:代表年份的最后兩位，如18<br /> yyyy:代表完整的4位年份<br /> MM:代表月份<br /> dd:代表日期<br /> hh:代表時間12小時制<br /> HH:代表時間24小時制<br /> mm:代表分鍾<br /> ss:代表秒<br /> 有了上面的基礎，我們要對一個時間進行格式就可以根據需要自由組合了<br /> 比如我們要格式化為：xxxx年xx月xx日，其格式為：yyyy年MM月dd日 <div>例如：格式顯示系統當前時間：{{nowDate|date:'yyyy-MM-dd HH:mm:ss'}}</div> </div> </div> </body> </html> <script src="../Scripts/angular.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller("myContro", function ($scope, $filter) { }); </script>
好了，時間也不早了，明天還要上班，今天就先學到這，明天繼續學習其他內置過濾器，謝謝大家支持與鼓勵。