前言
相信大家都知道過濾器的使用：一種是在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"> <!--多個過濾器之間用 | 連結--> <!--參數的實質就是把參數添加在數字前面（在貨幣符號處使用）--> {{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> <!--根據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} ]; // 如果數組的元素相等的話，這兩個元素的記憶體位址是相同的。 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>
運行效果圖如下
總結
以上就是這篇文章的全部內容，希望對大家的學習或者工作帶來一定的協助，如果有疑問大家可以留言交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
