AngularJs过滤器

最新推荐文章于 2021-02-01 11:47:14 发布

约德尔蒙

最新推荐文章于 2021-02-01 11:47:14 发布

阅读量252

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55218596

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>