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. 第一课Linux系统安装知识(2)

    接着上节课单击Finish按钮之后,虚拟机将会启动进入安装界面. 根据提示按回车选择图形界面安装. 这里选择Skip跳过媒介检查. 选择安装语言为简体中文,键盘鼠标默认项即可. 这里安装类型选择是定制 ...

  2. Java分布式：JWT(JSON Web Tokens)

    Java分布式:JWT(JSON Web Tokens) 0.优势 Session方式存储用户状态占用大量服务器内存.一般而言,大型应用还需要借助一些KV数据库和一系列缓存机制来实现Session的存 ...

  3. sortable实现拖拽功能

    使用sortable这个强力插件就很容易实现拖拽功能,它是目前比较牛逼的拖拽插件,无需jquery,就可以全面支持pc和移动,参考以下github文档就有很详细的说明,也给了很多 demo,插件就用我 ...

  4. leetcode每日一题——两数之和

    题目: 两数之和 难度: 简单 描述: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 解法: class Solutio ...

  5. c9.io

    老常时间没写了,这次是真碰到心动的东西了,赶快给大家奉献上来. (先上图!) (Cloud9 IDE,云端IDE,简单一点就是运行在浏览器中的IDE,你不需要安装任何东西, 只要打开任何一个浏览器,甚 ...

  6. vue项目 dev正常 build发生错误

    提取错误信息: 这个文件有错误,检查并修改即可 经过排除检查错误地方如下:多了个逗号

  7. Python3.x：Linux下安装python3.6

    Python3.x:Linux下安装python3.6 下载 #先进入download文件夹 cd /home/download #输入命令(下载到当前目录) wget https://www.pyt ...

  8. Nginx 限制php解析、限制浏览器访问

    限制php解析 1.有时候会根据目录来限制php解析: location ~ .*(diy|template|attachments|forumdata|attachment|image)/.*\.p ...

  9. jQuery上下切换带缩略图的焦点图

    在线演示 本地下载

  10. H3C交换机配置镜像端口

    配置步骤 进入配置模式:system-view: 创建本地镜像组:mirroring-group 1 local 为镜像组配置源端口:mirroring-group 1 mirroring-port ...