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>

运行效果图如下