angularjs學習第二天筆記---過濾器。主要學習了過濾器的使用方式,以及內置過濾器之:貨幣過濾器(currency)、時間過濾器(date) ...
您好,我是一名後端開發工程師,由於工作需要,現在系統的從0開始學習前端js框架之angular,每天把學習的一些心得分享出來,如果有什麼說的不對的地方,請多多指正,多多包涵我這個前端菜鳥,歡迎大家的點評與賜教。謝謝!
第二天,幾天主要學angularjs中的過濾器
一、簡介
angular js 的過濾器簡單的理解就是格式化數據,當數據格式不滿足要求時不會報錯,直接展示空
angularjs內置了一些常用的過濾器,當然也可以根據需要自定義過濾器 二、過濾器的使用方式有兩種: 1、在html中模板數據綁定內使用: 其使用方式是:在綁定模板中通過符號“|”來調用過濾器,格式為:{名稱|過濾器名稱}}如果有多個過濾器,那麼不同的過濾器間也同樣通過符號“|”相連接
每一個過濾器還可以添加約束條件,約束條件通過符號“:”構成,多個約束條件同樣用“:”相連接。
{名稱|過濾器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>
好了,時間也不早了,明天還要上班,今天就先學到這,明天繼續學習其他內置過濾器,謝謝大家支持與鼓勵。