AngularJS中過濾器的使用與自定義實例代碼
更新時間:2016年09月17日 15:13:53 作者:sdfujichao
這篇文章運用實例代碼給大家介紹了angularjs中過濾器的使用和自定義過濾器,對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價值,感興趣的朋友們可以參考借鑒。
前言
相信大家都知道過濾器的使用:一種是在html中的使用,一種是在js代碼中的使用,下面我們來通過實例深入了解。
實例代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>過濾器</title> <script src="day2/src/angular.js"></script> <style type="text/css"> </style> </head> <body> <div ng-app="fristApp"> <div ng-controller="fristController"> <!--多個過濾器之間用 | 鏈接--> <!--參數(shù)的實質(zhì)就是把參數(shù)添加在數(shù)字前面(在貨幣符號處使用)--> {{money | currency}}<br /> {{money | currency:'¥'}}<br /> {{str | uppercase}}<br /> {{json | json}}<br /> <!-- 會進行四舍五入--> {{num | number:3}}<br /> <!--時間 只有MM是大寫--> {{currenttime | date:'yyyy-MM-dd-hh'}} <!--字符串的切割--> {{strr | limitTo:3}} {{strr | limitTo:-3}} <!--按照person的age進行排序--> <ul> <li ng-repeat="person in arr | orderBy:'age':false"> {{person.name}} </li> </ul> <!--true 位于第二個位置,其中num是不能加“”的,上面的加“”是因為name是他的一個屬性--> <ul> <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true"> {{n}} </li> </ul> <!--根據(jù)person的屬性進行過濾--> <input type="text" ng-model="name" /> <ul> <li ng-repeat="person in arr | filter:{'name':name}"> {{person.name}} </li> </ul> </div> </div> </body> <script type="text/javascript"> var myApp = angular.module('fristApp',[]); myApp.controller('fristController',function($scope,$filter){ $scope.money = 100; $scope.str = "fsHIOiiiiIU" ; $scope.json = {name:"zhangsan",age:40}; $scope.num = 12432432432; var time = new Date(); $scope.currenttime = time.getTime(); $scope.strr = "fujichao"; $scope.arr = [ {name:'zhangsan',age:33}, {name:'zhangsan2',age:30}, {name:'zhangsan3',age:44}, {name:'zhangsan4',age:3} ]; // 如果數(shù)組的元素相等的話,這兩個元素的內(nèi)存地址是相同的。 var arrnum = [12,12,33,44]; if(arrnum[0]===arrnum[1]){ console.log("fji") }; /* 在JS中使用過濾器*/ // $filter(過濾器的名字)(對象,條件) var val = $filter('currency')($scope.money,'¥'); console.log(val); var string1 = "fssdHIUHIjiojjOIJIOJ" var valStr = $filter('uppercase')(string1); console.log(valStr) }) </script> </html>
運行效果圖如下
總結(jié)
以上就是這篇文章的全部內(nèi)容,希望對大家的學(xué)習(xí)或者工作帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)
這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11