[angularjs] angularjs系列笔记(四)过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中,这不就是模板函数吗
<body>
<div ng-app="Home">
<div ng-controller="Index">
格式化字符串为小写
{{myName()|lowercase}}。
格式化字符串为大写
{{myName()|uppercase}}。
格式化数字为货币格式
{{price|currency}}。
根据某个表达式排列数组
<p ng-repeat="x in prices | orderBy:'price'">{{x.price}}</p>
。
取出数组中的子元素
<input type="text" ng-model="test">
<p ng-repeat="x in prices |filter:test | orderBy:'price'">{{x.price}}</p>
。
</div>
</div> </body> <script type="text/javascript">
//实例化应用对象,参数:模块名,空数组
var app=angular.module("Home",[]);
//调用Application对象的controller()方法
app.controller("Index",function($scope){
$scope.myName=function(){
return "Tao"+"ShiHan";
}
$scope.price=5;
$scope.prices=[{price:1},{price:5},{price:3}];
});
</script>
[angularjs] angularjs系列笔记(四)过滤器的更多相关文章
- PE文件学习系列笔记四-C++实现PE文件的分析
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com 综述: 首 ...
- angularjs自动化测试系列之jasmine
angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...
- angularjs自动化测试系列之karma
angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用temp ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
随机推荐
- 10.1牛客J题
https://www.nowcoder.com/acm/contest/201/J Description: 给你一行括号,定义了括号合格的形式,然后Q次询问,问你这个区间内括号是否合格 Solut ...
- Android基础知识学习
IPC (Inter-Process Communication) 意思是: 进程间的通信,是指两个进程之间进行数据交换的过程. Android中如何开启多进程呢? 只需要给四大组件(Activit ...
- Python编程练习:平方值格式化
问题描述:获得用户输入的一个整数N,计算N的平方值:结果采用宽度20字符方式居中输出,空余字符采用减号(-)填充.如果结果超过20个字符,则以结果宽度为准. 示例: 源码: a = int(input ...
- Kali学习笔记26:OWASP_ZAP
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 OWASP_ZAP扫描器不同于之前介绍的Web扫描器: ...
- vim 行跳转和列跳转的方法
vim提供了丰富的快速跳转任意行.任意列的方法,方便高效地移动光标,定位文件位置. 一.Vim行跳转 使用vim查看文件时,使用以下命令可以快速跳转文件首.尾行,方便对整个文件有个全局把握. 1.1 ...
- 第13组_16通信3班_045_OSPFv3作业
IPv6 路由-OSPFv3 实验目的 1. 掌握 OSPFv3 的配置方法 2. 掌握在帧中继环境下 OSPFv3 的配置方法 3. 掌握 OSPFv3 NSSA 的配置方法 4. 学会查看 O ...
- Python 高度定制化自己的线程类和进程类代码,获取启动进程或线程方法的结果(兼容Py2和Py3)
#encoding=utf-8 from threading import Thread from multiprocessing import Process import multiprocess ...
- 在vue 中使用 less
1.安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader 先在index. ...
- Redis(2)---数据持久化
数据持久化 Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) (1)RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照.(默认模式) (2)以日志的形式来记录每个 ...
- IT十年经典书籍
摘自网络,近来在浏览时,发现一个叫做“IT十年经典书籍”的主题.google了一下,实在找不出这个主题的源头出处.不过这个主题中所涉及的每一本书讲出来都是振聋发聩的,大可以作为它那个行业的经典了. ...