<body ng-controller="myController">
<h2>{{price}}</h2>
<h2>{{price | currency}}</h2>
<h2>{{price | currency:"人民币"}}</h2>
<h2>{{str | lowercase}}</h2>
<h2>{{str | uppercase}}</h2>
<h2>{{date}}</h2>
<h2>{{date|date}}</h2>
<h2>{{date|date:"y-MM-dd HH:mm:ss a"}}</h2><hr>
<!--<h3 ng-repeat="item in items | limitTo:2">{{item.name}}</h3>-->
<!--<h3 ng-repeat="item in items | orderBy:'price':true">{{item.name+"---"+item.price}}</h3>-->
<hr>
<select ng-model=orderKey>
<option value="name">按名称排列</option>
<option value="price">按价格排列</option>
</select>
<input type="checkbox" name="" value="" ng-model="isDown">升/降序
<input type="text" name="" value="" ng-model="searchKey">
<!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown">{{item.name+"---"+item.price}}</h3>-->
<!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name+"---"+item.price}}</h3>-->
<hr>
{{"str" | myFilter}}
{{[2,3,4,5] | myFilter2}}
<h3 ng-repeat="item in items | myFilter3:searchKey">{{item.name}}</h3>
</body>
<script>
angular.module("myApp",[])
.controller("myController",["$scope",function($scope){
$scope.price = 4999;
$scope.str = "Hello Angular!!!";
$scope.date = new Date();
$scope.items = [{
name:"iphone1",
price:5000
},{
name:"小米",
price:2000
},{
name:"iphone5",
price:3000
},{
name:"红米",
price:400
}]
}])
.filter("myFilter",function(){
return function(val){
console.log(val)
//return val.toUpperCase()
return val =="str"?"low爆了":"蛋蛋"
}
})
.filter("myFilter2",function(){
return function(val){
console.log(val)
var arr = val.map(Math.sqrt)
return arr
}
})
.filter("myFilter3",function(){
return function(val,arg1){
console.log(val)
var arr = [];
val.forEach(function(item){
if(item.name.indexOf(arg1)!=-1){
arr.push(item);
}
})
return arr;
}
})
// 内置过滤器
//currency货币转换
//currency:"前缀" 更改指定的前缀 默认为$
//lowercase/uppercase 大小写转换
//date 日期格式化
//y年 M月 d日 H 24小时 h 12小时 m分钟 s秒
//数组过滤器:
//limitTo限制结果条数 如:limitTo:2 显示两条
//orderBy 排序
//orderBy:orderKey 按orderKey升序排列ordeBy:orderKey:true 按orderKey姜旭排列
//filter:按关键字快速过滤
//filter:searchKey过滤所有数据包括searchKey 的内容
</script>
</html>```
AngularJS 过滤器
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...