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. 请求库之selenium

    一 介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...

  2. selenium破解数字验证码

    搞了半天,总算弄出来了,识别率还可以,普通的数字验证码 from selenium import webdriver from PIL import Image import pytesseract ...

  3. 大家一起来学 NHibernate+NUnit (VS2012+SQL Server2008)

    大家一起来学 NHibernate+NUnit (VS2012+SQL Server2008) 分类: C#2013-08-10 18:47 1589人阅读 评论(5) 收藏 举报 NHibernat ...

  4. Leaflet API 翻译（一）

    摘自:http://jsrookie.iteye.com/blog/2318972 L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div ...

  5. EasyUI：所有的图标

    EasyUI:所有的图标 所有的图标在 jquery-easyui-1.2.6/themes/icons 目录下: jquery-easyui-1.2.6/themes/icon.css .icon- ...

  6. C语言中 ln（以自然对数e为底） lg(以十为底) 以及logab（以a为底，b为真数）的相关知识

    总所周知,我们在高中学过对数函数,记作y=logax.下面是百度百科关于对数函数的描述: 对数的定义:一般地,如果ax=N(a>0,且a≠1),那么数x叫做以a为底N的对数,记作x=logaN, ...

  7. 用树状数组求逆序对数（poj2299）

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 46995   Accepted: 17168 ...

  8. 智能DNS

    DNS查找下一个服务的地址   一.智能DNS APP通过域名访问DNS服务器,DNS根据域名对应一组IP中随机选择一个,发给APP.从这个意义说智能DNS,智能DNS相当一个七层的负载均衡. 二.H ...

  9. 关于Block汇总

    //使用总结: //1.当block里面会有b类相关的参数要回调回去的时候,属性用copy修饰,将其拷贝到堆里面,这样即便栈释放掉了,b类的指针也在堆中存在,能够成功的回调回去. //Block默认存 ...

  10. LeetCode——Number of Boomerangs

    LeetCode--Number of Boomerangs Question Given n points in the plane that are all pairwise distinct, ...