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 ...
随机推荐
- SQLServer修改表字段时进行表连接
update A set A.XXX='XXXX'from TableA Ainner join TableB B on B.XX=A.XXwhere XXXXX
- Linux下实现视频读取
V4L(video4linux是一些视频系统,视频软件.音频软件的基础,经常时候在需要采集图像的场合,如视频监控,webcam,可视电话,经常使用在embedded linux中是linux嵌入式开发 ...
- Nginx配置Q&A
隐藏响应头 How can remove Nginx from http response header? - Stack Overflow more_set_headers 'Server: my- ...
- j2ee学习笔记
Servlet: ①字符集问题:②身份验证:③统一的输入输出:类似母版,重写ServletResponeceWraper的getWriter,使用缓存流. 然后输出时,分析stringWriter , ...
- chrome、firefox、IE中input输入光标位置错位解决方案
以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...
- python调用函数实现数据的增删改查（1）
实现一个小功能,当输入相应的序号,会执行相关操作, 比如当输入序号1,会执行添加功能 #coding:utf-8print '''1 添加数据2 删除数据3 修改数据4 查看数据5 退出程序'''de ...
- 实验二：1、输出“Hello Word！”；2、测试主方法 的输入参数。3、总结
一.输出:“Hello Word!” 1.新建java项目:点击File->New->Java Project.在project name一栏中输入自己所要创建的项目名称,点击Finish ...
- css 里面怎么改链接颜色
a.color1:link{color: #FFFFFF ; text-decoration:none;} /*常规时候的样式*/a.color1:visited{color: #FFFFFF; te ...
- reMarkable安装教程
PS :每次都下一遍安装包挺无奈的...... 系统版本 :Ubuntu 16.04 安装包 :remarkable_1.87_all.deb 链接 Here!-> reMarkable 安装步 ...
- linux github 添加ssh
1.本地生成key, xxx 是github 的账号, 执行下面命令一路下一步 ssh-keygen -t rsa -C "xxx" 2.复制下面的public key 到git ...