[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真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
随机推荐
- Linux下使用openVPN连接到某个内网
推荐一个网站(比较全的介绍关于openvpn的客户端与服务端的配置) 点击我 此处我介绍我配置openvpn客户端连接的坑 我的机器为kali linux apt-get install openvp ...
- CDN随笔
CDN的理解:(1)CDN (内容分发网络)加速用户获取数据的 系统(2)部署在离用户最近的网络节点上(3)命中CDN 不需要访问后端服务器(4)互联网公司自己搭建或租用
- JavaScript 中的正则表达式
1.正则表达式概述 ECMAScript 3 开始支持正则表达式,其语法和 Perl 语法很类似,一个完整的正则表达式结构如下: 1 var expression = / pattern / flag ...
- day_11函数的形参与实参
昨天讲了函数的定义和简单分类 1:什么是函数:具体特定功能的代码快 --特定功能代码作为一个整体,并给该整体命名,就是函数. 函数的优点: 1:减少代码的冗余 2:结构清晰,可读性强 3:具有复用性, ...
- 关于css如何让图片文字居中的方法
在将父级转换为单元格形式时,设置的相关属性 可以达到如下效果:
- Java虚拟机:内存分配策略
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java中提倡的自动内存管理机制最终可以归结为自动化的解决两个问题:给对象分配内存和回收分配给对象的内存.在之前的博客中已经详细讲解了内存 ...
- UglifyJs打包压缩问题引起的思考
问题背景 最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的:因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样.于 ...
- Python编程练习:使用 turtle 库完成叠边形的绘制
绘制效果: 源代码: # 叠边形 import turtle turtle.setup(650,350,200,200) turtle.penup() turtle.fd(-100) turtle.l ...
- Java中线程同步锁和互斥锁有啥区别?看完你还是一脸懵逼?
首先不要钻概念牛角尖,这样没意义. 也许java语法层面包装成了sycnchronized或者明确的XXXLock,但是底层都是一样的.无非就是哪种写起来方便而已. 锁就是锁而已,避免多个线程对同一个 ...
- Java核心技术卷一基础知识-第3章-Java的基本程序设计结构-读书笔记
第3章 Java的基本程序设计结构 本章内容: 一个简单的Java应用程序 字符串 注释 输入输出 数据类型 控制流 变量 大数值 运算符 数组 本章主要讲述程序设计相关的基本概念(如数据类型.分支以 ...