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. 开发者需要知道的iOS 12

    总体概况 iOS 12总体来看是对现有iOS的一次改进,并没有太多突破性的功能或者框架,但是Apple在底层做了很多优化的工作,优化了性能,提供了更强大的安全性,增强了AR.Siri体验,让人工智能更 ...

  2. REST API风格

    REST API风格 就是用URL定位资源,用HTTP描述操作. 看Url就知道要什么看http method就知道干什么看http status code就知道结果如何   主要是针对资源进行资源定 ...

  3. ES6 随记（3.3）-- 数组的拓展

    上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 3. ES6 随记(3.1)-- 字符串的拓展 4. ES6 随记(3.2)-- 正则的拓展 ...

  4. Maven的SSM框架配置文件：

    applicationContext.xml: <?xml version="1.0" encoding="UTF-8"?> <beans x ...

  5. RN app打包

    最近使用React Native做起了移动应用,之前做过一点react,有一点react基础,后来听说RN还不错,就做起了RN项目.为了让辛辛苦苦开发的项目想在手机端运行,就涉及到发布打包. 防止自己 ...

  6. HDU 1532 --&&-- POJ1273 dinic 算法

    学长的代码#include<stdio.h> #include<string.h> #include<queue> #include<algorithm> ...

  7. mysql官网下载链接——绿色版&安装版

    windows64位5.5.60安装版 https://downloads.mysql.com/archives/get/file/mysql-5.5.60-winx64.msi windows64位 ...

  8. JMS-activeMq发布订阅模式

    上一篇对点对点模式进行总结,这一篇都发布订阅模式进行总结,代码都差不多,唯一区别就是创建队(session.createQueue(目的地))列改为创建主题(session.createTopic(目 ...

  9. python学习笔记（生成xml）

    想着给框架加些功能 首先想到的是生成测试报告 这里就涉及到了生成什么格式的文件 我这边就准备生成 xml 格式的文件 自己先学习了整理了下 代码如下: #!/usr/bin/env python # ...

  10. SPOJ - VLATTICE

    链接 题意:三维平面,找从(0,0,0)看(n,n,n)能看到的点 题解:很明显就是求gcd(i,j,k)==1的(i,j,k)对数,改一下公式即可,记得要算平行坐标轴的三个平面,还有含0的三个坐标 ...