在AngularJS的世界里，filter提供了一种格式化数据的方法，Angular也提供给我们了很多内建的过滤器，并且建立自定义过滤器也是相当的简单
在HTML的模板绑定{{}}中，我们使用 | 来调用过滤器，比如，我们想让字符串全部大写字符显示：
{{ name | uppercase }}
当然了，我们也可以在JavaScript中使用$filter服务来调用过滤器，还拿字符串大写来举例：
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);
如何传递参数到filter呢？只需要把参数放在filter之后，中间加个冒号（如果有多个参数要传递，在每个参数后加上冒号）比如，数字过滤器可以帮助我们限制数字的位数，如果想显示两位小数，加上number:2就可以了
{{ 123.456789 | number:2 }}
filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。
比如，在客户端搜索时，我们可以快速的从数组中过滤出我们想要的结果。
这个filter方法接收一个string，object，或者function参数用来选择/移除数组元素。
下满我们具体来看：
一，内置的过滤器
1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果：tank is good
｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化
{{ {foo: "bar", baz: 23} | json }} //结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。
3，date格式化
mysql时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"
{{ 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
4，number格式化
{{ 1.234567 | number:1 }} //结果：1.2
{{ 1234567 | number }} //结果：1,234,567
5，currency货币格式化
{{ 250 | currency }} //结果：$250.00
{{ 250 | currency:"RMB ￥ " }} //结果：RMB ￥ 250.00
6，filter查找 只能查value,不能查key
{{ [{"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"}])
7，limitTo字符串，对像的截取
{{ "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"}]
8，orderBy对像排序
{{ [{"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'] }}
二，自定filter功能
filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。
app.filter('过滤器名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...做一些事情
return 处理后的对象;
}
});
我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
filters.js添加一个module
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});
html中调用
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果：===== is good
注意：| lowercase |tankreplace管道命令可以有多个
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] "htmlcode">
<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>
angularjs
//默认排序字段
$scope.orderType = 'id';
$scope.order = '-';
$scope.changeOrder = function(type) {
console.log(type);
$scope.orderType = type;
if ($scope.order === '') {
$scope.order = '-';
}else{
$scope.order = '';
}
}
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。