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 ...
随机推荐
- linux编译安装protobuf2.5.0
1.下载安装包 https://github.com/google/protobuf/releases?after=v3.0.0-alpha-4.1 找到相应的版本下载 2.解压安装包 #.tar.g ...
- 深入理解DIP、IoC、DI以及IoC容器（转载）
<转载的这个up的其他的文章也很nice> 这几个词第一眼看,懵逼,第二眼看,更特么懵逼..... 面向对象设计(OOD)有助于我们开发出高性能.易扩展以及易复用的程序. 其中,OOD有一 ...
- python爬虫：读取PDF
下面的代码可以实现用python读取PDF,包括读取本地和网络上的PDF. pdfminer下载地址:https://pypi.python.org/packages/source/p/pdfmine ...
- IAAS: IT公司去IOE-Alibaba系统构架解读
从Hadoop到自主研发,技术解读阿里去IOE后的系统架构 原地址:...................... 云计算阿里飞天 摘要:从IOE时代,到Hadoop与飞天并行,再到飞天单集群5000节 ...
- SpringMVC（二）@RequestMapping
学习@RequestMapping注解,参考Spring API 1.@RequestMapping可以修饰在类类型和方法上 ①.修饰在类定义上: 提供初步的URL映射,相对于web应用 ...
- 基于Nginx服务的用户认证
通过Nginx实现web页面的用户认证,用户名为:admin,密码为:654321 1.修改Nginx配置文件 # vim /usr/local/nginx/conf/nginx.conf ..... ...
- CSV文件模块的使用
---恢复内容开始--- 1.CSV模块使用流程 1.导入模块 impport CSV 2.打开文件(xxx.csv) with open('xxx.csv','a',encoding='utf-8' ...
- 路飞学城Python-Day115
个人博客搭建 from django.db import models from django.contrib.auth.models import User, AbstractUser # Crea ...
- python3发送邮件
import smtplib from email.mime.text import MIMEText from email.utils import formataddr import psutil ...
- PHP如何判断一个数组是一维的还是二维的
1.首先我们有一个PHP内置函数 count(); count(array,mode); array是数组,mode默认为0,1是递归的计数 <?php if(count($arr) == co ...