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. [笔记]使用Go语言Redigo包在Docker容器内连接Redis容器的方法

    Docker容器之间的连接可以带来不少方便,下面记录下如何在自己容器内通过环境变量连接与之连接的Redis容器的方法. 先起一个Redis的Docker容器,命名为 redis,再起一个自己的Dock ...

  3. Windows netstat 查看端口、进程占用(转)

    本文转自:http://ywsm.iteye.com/blog/510670 目标:在Windows环境下,用netstat命令查看某个端口号是否占用,为哪个进程所占用. 操作:操作分为两步: 1)查 ...

  4. CreateWindow创建无边框 可拉伸窗体

    createwindow 定义 HWND WINAPI CreateWindow( _In_opt_ LPCTSTR lpClassName, _In_opt_ LPCTSTR lpWindowNam ...

  5. 什么是“欧几里德范数”（Euclidean norm）？

    x是n维向量(x1,x2,…,xn),||x||＝根号(|x1|方+|x2|方+…+|xn|方) 补充:开平方,跟几何一样

  6. Could not find com.android.support:appcompat-v7:23.1.1

    在刚接触Android Studio的时候,这玩意整起来确实费劲,现在接触多了,感觉还好,毕竟还有一段提升的空间,以后的必然趋势,所以还是潜心下来好好搞搞. 废话少说,切入正题. 如图所示的error ...

  7. shell printf命令：格式化输出语句

    printf 命令用于格式化输出, 是echo命令的增强版.它是C语言printf()库函数的一个有限的变形,并且在语法上有些不同. 注意:printf 由 POSIX 标准所定义,移植性要比 ech ...

  8. 尽可能的构建一个拓展性比"较好"的项目，会让你后期迭代好受点

    转载请注明出处:王亟亟的大牛之路 这礼拜基本都在忙自己项目上的事,然后之后会"重新整理"后把这部分的功能开源出来,这里@下队友 NeglectedByBoss 本周还是没有停更收纳 ...

  9. Docker高级使用

    Docker卸载应用程序 先删除容器,在删除镜像 查询容器 docker ps –a 使用容器id删除容器 docker rm 18e672ecd8ed 查询镜像 docker images 使用镜像 ...

  10. HIVE 编写自定义函数UDF

    一 新建JAVA项目 并添加 hive-exec-2.1.0.jar 和hadoop-common-2.7.3.jar hive-exec-2.1.0.jar 在HIVE安装目录的lib目录下 had ...