angularJs过滤器

最新推荐文章于 2019-05-23 20:27:11 发布

duderi1

最新推荐文章于 2019-05-23 20:27:11 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/Noviceduderi/article/details/78741765

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8"/>
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <style>
           *{
               margin: 0px auto;
               padding: 0px;
           }
           .div1{
               width: 400px;
           }
           #in{
               margin-left: 440px;
           }
       </style>
   </head>

   <body ng-app="myapp" ng-controller="cre">


       <input type="text" ng-model="data" id="in"/>


       <div class="div1">
           <p>货币过滤</p>
           没有过滤前:{{data}}<br />
           过滤后:{{data|currency}}<br />
           </div><br /><br />


       <div class="div1">
           <p>大小写过滤</p>
           没有过滤前:{{data}}<br />
           大写过滤后:{{data|uppercase}}<br />
           小写过滤后:{{data|lowercase}}
       </div><br /><br />


       <div class="div1">
           <p>限制位数</p>
           没有过滤前:{{data}}<br />
           限制过滤后:{{data|limitTo:6}}<br />
       </div><br /><br />



       <div class="div1">
       <p>filter过滤器，从一个数组里面选择一个子集</p>
       {{datas|filter:2}}<br />
       {{datas2|filter:"20"}}
       <p>不管有没有双引号</p>
       </div><br /><br />



       <div class="div1">
           <p>排序 orderBy</p>
           <p>默认升序。如果想倒叙，负号</p>
           升序过滤:{{datas2|orderBy:"name"}}<br /><br />
           倒序过滤:{{datas2|orderBy:"-name"}}
       </div><br /><br />



       <div class="div1">
           <p>日期</p>
           {{data|date:"yyyy年MM月dd日 hh-mm-ss"}}
       </div>

   </body>

   <script>
       //注入
       var mo=angular.module("myapp",[]);
       //创建控制器
       mo.controller("cre",function($scope){

           $scope.datas = [1,2,3,4,1,32,45];

           $scope.datas2= [{"name":"张三1","age":20},{"name":"张三2","age":22},{"name":"张三3","age":20}]
       })
   </script>
</html>