AngularJS中過濾器的使用與自定義實例代碼

2019-11-20 08:58:17

字體：大中小

來源：轉載

供稿：網友

前言

相信大家都知道過濾器的使用：一種是在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>

運行效果圖如下