ng 过滤器

最新推荐文章于 2024-06-12 11:59:04 发布

weixin_30652491

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量100

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/web-fusheng/p/6953733.html

版权

1、ng中自带的过滤器
过滤器：实现对数据的筛选、过滤、格式化。

过滤器是一个有返回值的方法。

过滤器语法：
{{ expression |过滤器1:'参数' | 过滤器2:'参数' }}

| --》管道，支持多重过滤。

常见的过滤器中：
①currency 货币样式的格式化
②date 日期格式化参数： y M d h m s 年月日时分秒
③filter 将一个array，处理一个新的数组
④json 将对象转换成json格式的字符串
'{"name":123}'
⑤uppercase/lowercase 大小写的转换
⑥orderBy 排序：按照字符串首字母排序，按照数字的大小排序，默认是升序的。
{{ expression | orderBy:'':boolean}}
⑦number 将一个数字进行格式化，根据参数决定显示小数点后的位数
⑧limitTo
限定数组中的个数

例子：

效果：

代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">
  <!-- 货币-->
  <p>{{price | currency}}</p>
  <p>{{price | currency :'￥'}}</p>
  <!-- 日期-->
  <p>{{myDate}}</p>
  <p>{{myDate | date:'MM-dd hh-mm'}}</p>
  <!-- 大小写转换-->
  <p>{{name | uppercase}}</p>
  <p>{{name | lowercase}}</p>
  <!-- 排序 order by-->
  <ul>
    <li ng-repeat="stu in stuList
    | orderBy:'age':true">
      <p>
        {{"name is "+stu.name+" age is "+stu.age}}
      </p>
    </li>
  </ul>
  <p>{{"num is "+num}}</p>
  <p>{{num | number:2}}</p>

  <ol>
    <li ng-repeat="tmp in list | limitTo:2">
      {{tmp}}
    </li>
  </ol>

</div>
<script>
  var app = angular.module('myApp', ['ng']);
  app.controller('myCtrl', function ($scope) {
    console.log('myCtrl  func is called');
    $scope.price = 1002;
    $scope.myDate = new Date();//初始化一个日期
    //大小写转换
    $scope.name = 'Michael';
    $scope.stuList = [
      {name:'zhangsan',age:20},
      {name:'lisi',age:28},
      {name:'wanger',age:22}
    ];

    $scope.num = 10.2333;
    $scope.list = [10,20,30,40,50];

  })
</script>
</body>
</html>

2.通过$scope定义一个对象数组(5个)，对象包含的属性：score\age\name。

实现按照score降序只显示前三名。

orderBy limitTo.

效果：

代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">
  <ul>
    <li ng-repeat="stu in stuList
    | orderBy:'score':true
    | limitTo:3">
      {{stu.name+"-"+stu.age+"-"+stu.score}}
    </li>
  </ul>
</div>
<script>
  var app = angular.module('myApp', ['ng']);
  app.controller('myCtrl', function ($scope) {
    console.log('myCtrl  func is called');
    $scope.stuList = [
      {name:'name6',age:10,score:80},
      {name:'name5',age:10,score:79},
      {name:'name4',age:10,score:82},
      {name:'name3',age:10,score:89},
      {name:'name2',age:10,score:60}
    ];
  })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/web-fusheng/p/6953733.html

weixin_30652491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng 过滤器

1、ng中自带的过滤器过滤器：实现对数据的筛选、过滤、格式化。过滤器是一个有返回值的方法。过滤器语法：{{ expression |过滤器1:'参数' | 过滤器2:'参数' }}| --》管道，支持多重过滤。常见的过滤器中：①currency 货币样式的格式化②date 日期格式化参数： y M d h m s 年月日时分秒③filter 将一个array，处理一个新...
复制链接

扫一扫