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>

ng 过滤器的更多相关文章

  1. Angularjs中对时间格式：/Date(1448864369815)/ 的处理

    注:本文使用的 angular 版本为 1.3 版 我们在后台对数据进行json序列化时,如果数据中包含有日期,序列化后返回到前端的结果可能是这样的: /Date(1448864369815)/  . ...

  2. ng自定义一个过滤器

    ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...

  3. 关于ng的过滤器的详细解释angular-filter

    在使用ng框架做项目的时候,我们可能会使用到ng自带的过滤器,来进行数据的筛选 一:ng自带的过滤器:currency ,date,limitTo,lowercase,uppercase,number ...

  4. struts过滤器的不同2.16以后应该是： org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter 2.12以前应该是org.apache.struts2.dispatcher.Filterdispatcher

    版本不同过滤器不同.2.16以后应该是:org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter2.12以前应该是or ...

  5. ng 自定义过滤器的创建和使用

    过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...

  6. ng中的过滤器

    angular中对输出的值提供过滤器,用法如下: {{name | currency:"￥"}}</p> 这是在在html中的用法,用 | 来添加过滤器,过滤器后面通过 ...

  7. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  8. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  9. filter 过滤器（监听）

    Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...

随机推荐

  1. Apache添加多端口

    Apache\conf 目录下 添加端口监听     Vhost.conf简单写写

  2. 『NiFi 学习之路』资源 —— 资料汇总

    一.概述 由于 NiFi 是一个比较新的开源项目,国内的相关资料少之又少. 加之,大家都知道,国内的那么些个教程,原创都只是停留在初级使用阶段,没有更多深入的介绍. 再者,其余的文章不是东抄抄就是西抄 ...

  3. cf100989b

    http://codeforces.com/gym/100989/my B. LCS (B) time limit per test 0.25 seconds memory limit per tes ...

  4. ubuntu下关于profile和bashrc中环境变量的理解

    (0) 写在前面 有些名词可能需要解释一下.(也可以先不看这一节,在后面看到有疑惑再上来看相关解释) $PS1和交互式运行(running interactively): 简单地来说,交互式运行就是在 ...

  5. hadoop11----socket

    package cn.itcast.bigdata.socket; import java.io.BufferedReader; import java.io.InputStream; import ...

  6. 20145201 实验三 敏捷开发与XP实践

    实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软件工程包括下列领域:软件需求分析.软件设计. ...

  7. QT的基本数据类型

    QT的基本数据类型(转) qint8:signed char 有符号8比特数据 qint16:signed short 16位数据类型 qint32:signed int. 32位有符号数据类型 qi ...

  8. 关于camera 构架设计的一点看法

    camera的构架目前来看有两种,一种是集中式管理,比如说建立一个引擎,引擎向上提供接口,向下管理所有模块.把camera的所有功能划分为不同的模块,又引擎统一管理.模块的结构就比较随意了,可以统一接 ...

  9. Spring_Bean 之间的关系

    beans-relation.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns=& ...

  10. linux 挂在新硬盘

    记录一下    全忘了..... PS 测试服务器的主板太差劲了,没有多余的电源接口,只能把光驱的电源拿出来,才能让硬盘使用.把硬盘装好后,我们用 fdisk -l 查看下: 图中可以看出 /dev/ ...