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 ...
随机推荐
- [Luogu1273] 有线电视网
[Luogu1273] 有线电视网 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树 ...
- Codeforces Round #447
QAQ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<vector> ...
- 剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,建议先了解Promise的使用 Promise标准解读 1.只有一个then方法,没有catch,ra ...
- Oracle数据库安装与连接与简介
Oracle数据库的安装 1.登录Oracle官网——试用和下载 2.同意协议--->file1 3.完成配置 4.测试连接:打开Oracle developer--->新建连接,注意用户 ...
- (转)一个vue路由参数传递的注意点
首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我 ...
- main函数解析
原文链接:http://parisliu2008.blog.163.com/blog/static/95070867200951510412959/ main参数 2009-06-15 10:41:2 ...
- 应用一：Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
- Robot Framework（四）创建测试套件
2.3.1测试用例文件 Robot Framework测试用例是使用测试用例文件中的测试用例表创建的.这样的文件会自动从它包含的所有测试用例中创建一个测试套件.可以有多少测试用例没有上限,但建议少于1 ...
- input左减右加
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" ...
- node——模块化
之前写的新闻部分几乎所有操作都写在了一起,这次开始进行模块化. 为什么要模块化: 1.提高开发效率,所有操作在一个文件内,不方便团队操作,模块化可多人同时操作 2.当程序出错,可以分模块寻找错误 3. ...