angularjs1-过滤器
<!DOCTYPE html>
<html>
<body>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
</header>
<div ng-app="myApp">
<div ng-controller="firstController">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
{{firstName | uppercase }}
{{lastName}}
{{price | currency}}
<br><br> <br><br>
{{json | json }}
<br><br>
<br>
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
<br><br>
{{ 1.234567 | number:1 }}
<br><br>
{{ 250 | currency:"RMB ￥ " }}
<br><br>
{{ "i love tank" | limitTo:6 }}
<br><br>
{{ "i love tank" | limitTo:-6 }}
<br><br>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}
<br><br>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
</div>
<div ng-controller="secondController">
<ul>
<li ng-repeat="p in person">
姓名：{{p.name}}
年龄：{{p.age}}
</li>
</ul>
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country':true">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<p>输入过滤： </p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<p>name筛选：</p>
<ul>
<li ng-repeat="x in names | filter:{'name':name} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'sunm'} }}
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller('firstController',function($scope,$filter){
$scope.firstName="zhangsan";
$scope.lastName="李四";
$scope.price="12121212";
$scope.str='HelloWord';
$scope.json={foo: "bar", baz: 23};
$scope.uFirstName=$filter('uppercase')($scope.firstName);
// $scope.cprice= $filter('currency')($scope.price);
$scope.cprice= $filter('currency')($scope.price,'RMB ');
console.log($scope.uFirstName);
console.log($scope.cprice);
});
app.controller('secondController',function($scope){
$scope.person=[
{name:'张三',age:'25'},
{name:'李四',age:'30'},
{name:'王五',age:'36'}
];
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular.min.js"></script>
<script src="filter.js"></script> //引入文件
<!-- filter.js
var appFilter=angular.module("myApp.filter",[]);
appFilter.filter('rJs',function(){
return function(input,n1,n2){
console.log(input);
console.log(n1);
console.log(n2);
return input.replace(/js/, "javascript");
}
}); -->
</header>
<div ng-app="myApp">
<div ng-controller="firstController">
{{name | rHello}}
<br>
{{name | rHello:3:5}}
<br>
{{name | rJs}}
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp",['myApp.filter']); //依赖
app.controller('firstController',function($scope){
$scope.name="Hello Angularjs";
});
app.filter('rHello',function(){
return function(input,n1,n2){
console.log(input);
console.log(n1);
console.log(n2);
return input.replace(/Hello/, "你好");
}
});
</script>
</body>
</html>
angularjs1-过滤器的更多相关文章
- angularJS1笔记-(6)-自定义过滤器
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- angularJS1笔记-(5)-过滤器练习
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Angularjs过滤器的开发.
先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...
- AngularJs学习笔记3-服务及过滤器
距离上次别博客有有一段时间了,因为最近公司和个人事情比较多,也因为学习新的知识所以耽搁了,也有人说Angularjs1.5没有人用了,没必要分享,我个人感觉既然开头了我就坚持把他写完,对一些还在使用或 ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- ASP.NET Core 中文文档 第四章 MVC（4.3）过滤器
原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...
- ASP.NET Web API 过滤器创建、执行过程(二)
ASP.NET Web API 过滤器创建.执行过程(二) 前言 前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...
- ASP.NET Web API 过滤器创建、执行过程(一)
ASP.NET Web API 过滤器创建.执行过程(一) 前言 在上一篇中我们讲到控制器的执行过程系列,这个系列要搁置一段时间了,因为在控制器执行的过程中包含的信息都是要单独的用一个系列来描述的,就 ...
- ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...
- AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter
今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在 controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...
随机推荐
- Eclipse 连接hsqldb数据库
初学Java,在接触数据库根本无从下手,不知如何将程序和数据库连接起来,今天做一个记录. 数据库是:hsqldb_1_8_0_5 附链接百度云盘 链接:https://pan.baidu.com/s/ ...
- Email非正则表达式的判断
判断一个邮件是否合法,我们除了可以使用正则表达四以外还可以利用,Email地址的规律进行判断,那么一个合法的Email有哪些要求昵?具体如下: 必须有@与. @必须在第一个.之前 @与.不能连在一起 ...
- 本地文件SVN和 vs svn 插件的使用！！
比如:客服端是用的TortoiseSVN-1.7.7.22907-x64-svn-1.7.5.msi 里面svn 版本是1.7.5 vs里的插件 也需要svn 版本是1.7.5 对应的AnkhSvn- ...
- Fail2ban + firewalld 防护doss攻击
系统环境:centos7.3 用途:利用fail2ban+Firewalld来防CC攻击和SSH爆破 准备工作: 1.检查Firewalld是否启用 #如果您已经安装iptables建议先关闭 ser ...
- 文件操作:Directory,File,FielStream、StreamRead和StreamWriter的使用
Directory文件类,File,FielStream.StreamRead和StreamWriter的使用 (转载) 创建一个新文件 Directory.CreateDirectory(@&quo ...
- powershell遍历文件夹设置权限，解决文件无法删除的问题。
function set-rights ($path) { $p = Get-Item $path; if ($p.Attributes -eq 'Directory') { foreach ($ch ...
- RFID 知识的学习
* 部分资料来自我们博士的PPT,部分来自网络和他人的论文. * 我们使用的教材是清华大学出版社出版的<智能卡技术(第四版)——IC卡.RFID标签与物联网(清华大学计算机系列教材)>(王 ...
- poj 2955 Brackets 【 区间dp 】
话说这题自己折腾好久还是没有推出转移的公式来啊------------------ 只想出了dp[i][j]表示i到j的最大括号匹配的数目--ค(TㅅT)------------------- 后来搜 ...
- JS操作DOM的一些常用方法
getElementById():获取有指定惟一ID属性值文档中的元素 getElementsByName(name):返回的是数组 getElementsByTagName():返回具有指定标签名的 ...
- JDBCUtils 工具类
import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSource;import java.io.IOE ...