AngularJs过滤器

来源：互联网发布：数据库数据太多编辑：程序博客网时间：2024/06/08 06:33
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><!--     在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。 -->  <body ng-app="App">            <ul ng-controller="DemoController">          <li>{{price|currency:'$'}}</li>             <!-- 将数值格式化为货币格式 -->          <li>{{now|date:'yyyy/MM/dd hh:mm:ss'}}</li>     <!-- 日期格式化，年（y）、月（M）、日（d）、                                           星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、                                           毫秒（.sss），也可以组合到一起使用 -->                    <li>{{items|filter:'s'}}</li>           <!-- 在给定数组中选择满足条件的一个子集，并返回一个新数组-->          <li>{{students|filter:{age: 16} }}</li>     <!-- ，其条件可以是一个字符串、对象、函数-->                    <li>{{students|json}}</li>  <!-- 将Javascrip对象转成JSON字符串 -->          <li>{{items|limitTo:-1}}</li>   <!-- 取出字符串或数组的前（正数）几位或后（负数）几位-->                    <li>{{str|uppercase|limitTo:3}}</li>    <!-- 将文本转换成大写格式-->          <li>{{str|lowercase}}</li>      <!-- 将文本转换成小写格式 -->          <li>{{num|number:2}}</li>       <!-- 将文本转换成大写格式 -->                    <li>{{items|orderBy: '':true}}</li>     <!-- 数字格式化，可控制小位位数-->          <li>{{students|orderBy: 'age': false}}</li> <!-- 对数组进行排序，第2个参数可控制方向 -->      </ul>        <script src="../libs/angular.min.js"></script>      <script>          var App = angular.module('App', []);            App.controller('DemoController', ['$scope', function ($scope) {                $scope.price = 11.11;                 $scope.now = new Date;                $scope.items = ['html', 'css', 'js'];                $scope.students = [                  {name: '马超', age: 16},                  {name: '许褚', age: 16},                  {name: '张辽', age: 10}                ];                $scope.str = 'hello Angular';                $scope.num = '10.2345';            }]);        </script>  </body>  </html>  </html>
0 0