如何在 ng-repeat angularjs 中通过 obj 的属性过滤数据
how to filter the data by obj's attribute in ng-repeat angularjs
我是 angularjs
的初学者
假设我们有一个像
这样的 josn obj
[ {
"Title": "a",
"Date": "2015-05-31",
"a": "11",
"b": 22,
},
{
"Title": "b",
"Date": "2015-05-11",
"a": "33",
"b": 44,
},
{
"Title": "c",
"Date": "2015-04-11",
"a": "55",
"b": 66,
},
{
"Title": "d",
"Date": "2015-03-03",
"a": "11",
"b": 22,
}
]
ng重复
<li ng-repeat="obj in objs">{{obj.Date | date:"MM/yyyy"}}</li>
我们在 json obj 中有 5 月 (05-31 ,05-11) 的两个数据,以及
我想一个月保留一个数据,只保留第二个。
fliter 怎么写我很困惑
您需要创建一个过滤器并在 ng-repeat 中使用它。
创建过滤器的语法是这样的:
angular
.module('myModule')
.filter('myFilter', function myFilter(service1, service2) { //to ask for deps
return function(input) { //here you do the real filtering
return doSomethingWithInput(input);
}
})
要应用您要求的逻辑过滤,您可以像这样创建一个过滤器:
angular
.module('myModule')
.filter('oncePerMonth', oncePerMonth);
function oncePerMonth() {
return function (data) {
var filtered = [], months = [];
data.forEach(function(item){
var month = item.Date.substr(0,7);
if (~~months.indexOf(month)){
months.push(month);
filtered.push(item);
}
});
return filtered;
}
}
使用此过滤器,html 模板将如下所示:
<li ng-repeat="obj in vm.objs | oncePerMonth">
{{obj.Date | date:"MM/yyyy"}} {{obj.Title}}
</li>
您可以在这里找到可用的 Plnkr:http://plnkr.co/edit/sg0wWPuUE0cJwoZj2KuS?p=preview
我是 angularjs
的初学者假设我们有一个像
这样的 josn obj [ {
"Title": "a",
"Date": "2015-05-31",
"a": "11",
"b": 22,
},
{
"Title": "b",
"Date": "2015-05-11",
"a": "33",
"b": 44,
},
{
"Title": "c",
"Date": "2015-04-11",
"a": "55",
"b": 66,
},
{
"Title": "d",
"Date": "2015-03-03",
"a": "11",
"b": 22,
}
]
ng重复
<li ng-repeat="obj in objs">{{obj.Date | date:"MM/yyyy"}}</li>
我们在 json obj 中有 5 月 (05-31 ,05-11) 的两个数据,以及 我想一个月保留一个数据,只保留第二个。
fliter 怎么写我很困惑
您需要创建一个过滤器并在 ng-repeat 中使用它。 创建过滤器的语法是这样的:
angular
.module('myModule')
.filter('myFilter', function myFilter(service1, service2) { //to ask for deps
return function(input) { //here you do the real filtering
return doSomethingWithInput(input);
}
})
要应用您要求的逻辑过滤,您可以像这样创建一个过滤器:
angular
.module('myModule')
.filter('oncePerMonth', oncePerMonth);
function oncePerMonth() {
return function (data) {
var filtered = [], months = [];
data.forEach(function(item){
var month = item.Date.substr(0,7);
if (~~months.indexOf(month)){
months.push(month);
filtered.push(item);
}
});
return filtered;
}
}
使用此过滤器,html 模板将如下所示:
<li ng-repeat="obj in vm.objs | oncePerMonth">
{{obj.Date | date:"MM/yyyy"}} {{obj.Title}}
</li>
您可以在这里找到可用的 Plnkr:http://plnkr.co/edit/sg0wWPuUE0cJwoZj2KuS?p=preview