过滤器

可以对输入的值按照指定的方案进行处理后再输出的函数。

1.货比过滤器currency：{{ currency_expression | currency : symbol}}

2.日期过滤器：date格式化date到字符串，基于format的要求。

{{ date_expression | date : format}}

3.数字过滤器：number，格式化数字

4.大小写：lowercase，uppercase

5.limitTo

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="KunShan Online retailers ">

    <title></title>

    <link rel="stylesheet" href="css/angular-csp.css" />

</head>

<body ng-app="app">

    <div ng-controller="ctrl">

        currency:<input ng-model="t2" /> <br/>

        <h3>{{ t2|currency:'RMB ' }}</h3>

        <h2>{{birthday|date}}</h2>

        number:<input ng-model="t1" /><br />

        <p1>{{t1|number:2}}</p1>

        <h2>{{ temp1 | uppercase}}</h2>

        LowerCase:<input ng-model="temp2" /><br/>

        <h2>{{temp2 | lowercase}}</h2>

        limitTo:<input ng-model="temp3" /> <br/>

        <h2>{{temp3 | limitTo:3}}</h2>

    </div>

    <script type="text/javascript" src="js/angular.js" ></script>

    <script type="text/javascript" src="js/0122.js"></script>

</body>

</html>
var app = angular.module('app',[]);//创建的模块赋值给app对象

app.controller('ctrl',function ($scope) {

    $scope.birthday = new Date();

    $scope.data = [1,2,3,4,5,6];

    $scope.temp1="zhangqing";

})

6.filter：从array中选择一个子集，作为一个新数组返回

{{filter_expression | filter:expresion:comparator }}

ng-repeat（重要）:用来将数据集合按照指定的形式重复渲染出来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="KunShan Online retailers ">

    <title></title>

    <link rel="stylesheet" href="css/angular-csp.css" />

</head>

<body ng-app="app">

    <div ng-controller="ctrl">

        任意字段<input type="text" ng-model="searchText.$" />

        搜索名字<input type="text" ng-model="searchText.name" />

        搜索电话<input type="text" ng-model="searchText.tel" />

        <!--ng-repeat::用来将数据集合按照指定的形式重复渲染出来-->

        <table>

            <tr><td>name</td><td>tel</td></tr>

            <tr ng-repeat="friend in friends | filter:searchText"><!--filter过滤器:object-->

                <td>{{friend.name}}</td>

                <td>{{friend.tel}}</td>

            </tr>

        </table>

    </div>

    <script type="text/javascript" src="js/angular.js" ></script>

    <script type="text/javascript" src="js/0122.js"></script>

</body>

</html>
var app = angular.module('app',[]);//创建的模块赋值给app对象

app.controller('ctrl',function ($scope) {

    $scope.birthday = new Date();

    $scope.data = [1,2,3,4,5,6];

    $scope.temp1="zhangqing";

    $scope.friends=[

        {name:'q1',tel:'1111'},

        {name:'q2',tel:'2222'},

        {name:'q3',tel:'3333'},

        {name:'q4',tel:'4444'},

        {name:'q5',tel:'5555'}

    ]

})

7.orderBy：通过expression来排序指定的数组。字符串按字母的顺序排序，数字按照大小排序。注意：如果你发现数字没有正确排序，请确认他们保存的是数字而不是字符串。

{{orderBy_expression|orderBy:expression:reverse}}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="KunShan Online retailers ">

    <title></title>

    <link rel="stylesheet" href="css/angular-csp.css" />

</head>

<body ng-app="app">

    <div ng-controller="ctrl">

        任意字段<input type="text" ng-model="searchText.$" />

        搜索名字<input type="text" ng-model="searchText.name" />

        搜索电话<input type="text" ng-model="searchText.tel" />

        <!--ng-repeat::用来将数据集合按照指定的形式重复渲染出来-->

        <table>

            <tr>

                <td><a href="javascript:void (0);" ng-click="orderFriend='name';reverse=!reverse;">name</a></td>

                <td><a href="javascript:void (0);" ng-click="orderFriend='tel';reverse=!reverse;">tel</a></td>

            </tr>

            <tr ng-repeat="friend in friends | orderBy:orderFriend:reverse"><!--filter过滤器:object-->

                <td>{{friend.name}}</td>

                <td>{{friend.tel}}</td>

            </tr>

        </table>

    </div>

    <script type="text/javascript" src="js/angular.js" ></script>

    <script type="text/javascript" src="js/0122_orderby.js"></script>

</body>

</html>
var app = angular.module('app',[]);//创建的模块赋值给app对象

app.controller('ctrl',function ($scope) {

    $scope.friends=[

        {name:'zq1',tel:'1111'},

        {name:'qq2',tel:'2222'},

        {name:'wq3',tel:'3333'},

        {name:'eq4',tel:'4444'},

        {name:'fq5',tel:'5555'}

    ]

    $scope.orderFriend='';

    $scope.reverse=true;

})

AngularJS-03 过滤器的更多相关文章

  1. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  2. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  3. 走进AngularJs(七) 过滤器（filter） - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  4. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  5. 创建 AngularJS 自定义过滤器，带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. angularJS的过滤器！

    angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Fil ...

  9. AngularJS：过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  10. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

随机推荐

  1. Java锁优化

    Java锁优化 应用程序在并发环境下会产生很多问题,通常情况下,我们可以通过加锁来解决多线程对临界资源的访问问题.但是加锁往往会成为系统的瓶颈,因为加锁和释放锁会涉及到与操作系统的交互,会有很大的性能 ...

  2. 《你不知道的JavaScript（上）》笔记——动态作用域

    动态作用域让作用域作为一个在运行时就被动态确定的形式, 而不是在写代码时进行静态确定的形式.动态作用域并不关心函数和作用域是如何声明以及在何处声明的, 只关心它们从何处调用. 换句话说, 作用域链是基 ...

  3. linux Host key verification failed.错误

    Host key verification failed. 1. ssh-keygen -R 你要访问的IP地址 2. ssh-keygen -R 108.61.163.242

  4. OpenCV学习笔记(2)——如何用OpenCV处理视频

    如何用OpenCV处理视频 读取视频文件,显示视频,保存视频文件 从摄像头获取并显示视频 1.用摄像头捕获视频 为了获取视频,需要创建一个VideoCapature对象.其参数可以是设备的索引号,也可 ...

  5. eclipse远程连接hadoop单机模式出现的问题

    按照http://tydldd.iteye.com/blog/2007938配置单机模式 主要是 (1)配置hadoop-env.sh,指定jdk的安装路径 添加jdk路径 # The java im ...

  6. SD卡状态监听(无序广播)

    import android.content.BroadcastReceiver; import android.content.Context; import android.content.Int ...

  7. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_01-自定义查询页面-服务端-Dao

    在页面输入查询条件,查询符合条件的页面信息. 查询条件如下: 站点Id:精确匹配 模板Id:精确匹配 页面别名:模糊匹配 spring mongoDB如何自定义条件 在Repository的findA ...

  8. java泛型中特殊符号的含义

    java泛型中的标记符含义:  E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number ...

  9. Freemarker使用总结

    spring mvc 中 Freemarker 获取项目根目录,方便HTML页面配置各种路径 在SpringMVC框架中使用Freemarker试图时,要获取根路径的方式如下: <!-- Fre ...

  10. leetcode 求一个字符串的最长回文子串

    最长回文子串问题:给定一个字符串,求它的最长回文子串长度.如果一个字符串正着读和反着读是一样的,那它就是回文串.   给定一个字符串,求它最长的回文子串长度,例如输入字符串'35534321',它的最 ...