AngularJS应用与过滤器-CSDN博客

本文链接：https://blog.csdn.net/weikai_/article/details/78224799

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="../AngularJS/angular.js" ></script>
      <script>
         //获取系统时间对象
         var date = new Date();
         
         //定义AngularJS应用程序
         var app = angular.module("myApp",[]);
         //定义控制器
         app.controller("myCtrl",function($scope){
            $scope.money = 500;
            $scope.hello = "hello";
            $scope.date = date;
            $scope.user = ["zs","ls","ls","ww"];
            $scope.users = [{
               name:"zs",
               age:20
            },{
               name:"ls",
               age:21
            },{
               name:"ww",
               age:22
            }];
            
            $scope.student = [{
               id:1,
               name:"张三",
               age:20
            },{
               id:2,
               name:"王五",
               age:21
            },{
               id:2,
               name:"李四",
               age:22
            }];
            
            $scope.order = function(text){
               console.log(text);
               return text["id","-name"];
            }
            
         })
         
      </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
      <p>货币过滤器：{{money | currency:"$"}}</p>
      <p>大写过滤器：{{hello | uppercase}}</p>
      <p>日期过滤器：{{date | date:"yyyy.MM.dd HH:mm:ss"}}</p>
      <p>长度过滤器：{{user | limitTo:-2}}</p>
      <p>子元素过滤器：{{users | filter:{'name':'ls','age':21} }}</p>
      <hr />
      <p>默认排序：{{student | orderBy}}</p>
      <p>角标升序：{{student | orderBy:"+"}}</p>
      <p>角标降序：{{student | orderBy:"-"}}</p>
      <p>角标升序：{{student | orderBy:true}}</p>
      <p>ID升序：{{student | orderBy:"id"}}</p>
      <p>ID降序：{{student | orderBy:"-id"}}</p>
      <p>ID升序name升序：{{student | orderBy:["id","name"]}}</p>
      <p>ID升序name将序：{{student | orderBy:["id","-name"]}}</p>
      
      <p>ID升序name将序：{{student | orderBy:order}}</p>
   </body>
</html>

过滤器~排序