{{ name | uppercase }}
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);
{{ 123.456789 | number:2 }}
{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果:tank is good
{{ {foo: "bar", baz: 23} | json }} //结果:{ "foo": "bar", "baz": 23 }
{{ 1304375948024 | date:'medium'}} //May 03, 2011 06:39:08 PM
{{ 1304375948024 | date }} //结果:May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果:05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果:2011-05-03 06:39:08
{{ 1.234567 | number:1 }} //结果:1.2
{{ 1234567 | number }} //结果:1,234,567
{{ 250 | currency }} //结果:$250.00
{{ 250 | currency:"RMB ¥ " }} //结果:RMB ¥ 250.00
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'ip'} }} //查找name like ip的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]
$filter('number')(30000, 2);
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])
{{ "i love tank" | limitTo:6 }} //结果:i love
{{ "i love tank" | limitTo:-4 }} //结果:tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //结果:[{"age":20,"id":10,"name":"iphone"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:['-age','name'] }}
app.filter('过滤器名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...做一些事情
return 处理后的对象;
}
});
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果:===== is good
yourApp.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
<thead>
<tr>
<!-- ng-class="{dropup:true}" -->
<th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}">
产品编号
<span ng-class="{orderColor: orderType === 'id'}" class="caret"></span>
</th>
<th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}">
产品名称
<span ng-class="{orderColor: orderType === 'name'}" class="caret"></span>
</th>
<th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}">
产品价格
<span ng-class="{orderColor: orderType === 'price'}" class="caret"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in productData | filter: search | orderBy:order + orderType">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency: '¥'}}</td>
</tr>
</tbody>
//默认排序字段
$scope.orderType = 'id';
$scope.order = '-';
$scope.changeOrder = function(type) {
console.log(type);
$scope.orderType = type;
if ($scope.order === '') {
$scope.order = '-';
}else{
$scope.order = '';
}
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有