Angular 自定义过滤器 returns 如果数组有匹配的字符串
Angular custom filter that returns if the array has the matching string
为了解决这个问题,我绞尽脑汁已经有一段时间了。我觉得我快到了,但无法正确完成最后一块工作。这就是我想要做的。我正在创建一个自定义过滤器,它将遍历我的 json 数组以查看是否有 "status" 键,如果 "status" 键包含 "SUCCESS" 字段,它将 return 匹配该数组的所有对象。如果 "status" 键不存在,则不显示数组对象。我可以看到我的循环看起来是正确的,因为它正在确定哪个对象数组包含关键字,但是当我尝试打印出我的结果时,我什么也没看到。请帮忙!
这是演示。
https://jsfiddle.net/missggnyc/6r9oophu/20/
HTML
<div ng-app="mySessions">
<div ng-controller="sessionController">
<table>
<tr>
<td>Session ID</td>
<td>Session Name</td>
</tr>
<tr ng-repeat="cs in cSessions | successSessionFilter">
<td>{{cs.id}}</td>
<td>{{cs.session_name}}</td>
</tr>
</table>
</div>
JS
var app = angular.module('mySessions', []);
app.controller("sessionController", ['$scope', function($scope){
$scope.cSessions = [
{"id":2,"session_name":"BD20","session_description":"","status":["INPROGRESS"]},
{"id":3,"session_name":"CS03","session_description":"","status":["INPROGRESS", "SUCCESS"]},
{"id":4,"session_name":"MIS99","session_description":"","status":["FAIL","NOTINPROGRESS"]},
{"id":5,"session_name":"XGY7","session_description":"","status":["SUCCESS", "NOTINPROGRESS"]},
{"id":6,"session_name":"DCCC2","session_description":""},
{"id":7,"session_name":"IUOS33","session_description":""}
];
}]);
app.filter('successSessionFilter', function(){
return function(cObj){
angular.forEach(cObj, function(value, key){
angular.forEach(value, function(v, k){
//console.log('k is ' + k + ' and v is '+ v);
if(k === 'status'){
if(v.indexOf("SUCCESS") > -1){ //if it exists
//console.log("SUCCESS exists "+ v.indexOf("SUCCESS"));
//console.log(v);
return true;
}
else { //it the status field isn't there, then don't show the object
return false;
}
}
else
return false;
})
})
// console.log(cObj);
}
});
我们开始
app.filter('successSessionFilter', function(){
return function(items){
var filtered = items.filter(function(item){
if(item['status'] && item['status'].indexOf('SUCCESS') != -1){
return item;
}
})
return filtered;
}
});
更简单的方法。只需将 tr ng-repeat 修改为
<tr ng-repeat="cs in cSessions | filter:'SUCCESS'">
<td>{{cs.id}}</td>
<td>{{cs.session_name}}</td>
</tr>
为了解决这个问题,我绞尽脑汁已经有一段时间了。我觉得我快到了,但无法正确完成最后一块工作。这就是我想要做的。我正在创建一个自定义过滤器,它将遍历我的 json 数组以查看是否有 "status" 键,如果 "status" 键包含 "SUCCESS" 字段,它将 return 匹配该数组的所有对象。如果 "status" 键不存在,则不显示数组对象。我可以看到我的循环看起来是正确的,因为它正在确定哪个对象数组包含关键字,但是当我尝试打印出我的结果时,我什么也没看到。请帮忙!
这是演示。
https://jsfiddle.net/missggnyc/6r9oophu/20/
HTML
<div ng-app="mySessions">
<div ng-controller="sessionController">
<table>
<tr>
<td>Session ID</td>
<td>Session Name</td>
</tr>
<tr ng-repeat="cs in cSessions | successSessionFilter">
<td>{{cs.id}}</td>
<td>{{cs.session_name}}</td>
</tr>
</table>
</div>
JS
var app = angular.module('mySessions', []);
app.controller("sessionController", ['$scope', function($scope){
$scope.cSessions = [
{"id":2,"session_name":"BD20","session_description":"","status":["INPROGRESS"]},
{"id":3,"session_name":"CS03","session_description":"","status":["INPROGRESS", "SUCCESS"]},
{"id":4,"session_name":"MIS99","session_description":"","status":["FAIL","NOTINPROGRESS"]},
{"id":5,"session_name":"XGY7","session_description":"","status":["SUCCESS", "NOTINPROGRESS"]},
{"id":6,"session_name":"DCCC2","session_description":""},
{"id":7,"session_name":"IUOS33","session_description":""}
];
}]);
app.filter('successSessionFilter', function(){
return function(cObj){
angular.forEach(cObj, function(value, key){
angular.forEach(value, function(v, k){
//console.log('k is ' + k + ' and v is '+ v);
if(k === 'status'){
if(v.indexOf("SUCCESS") > -1){ //if it exists
//console.log("SUCCESS exists "+ v.indexOf("SUCCESS"));
//console.log(v);
return true;
}
else { //it the status field isn't there, then don't show the object
return false;
}
}
else
return false;
})
})
// console.log(cObj);
}
});
我们开始
app.filter('successSessionFilter', function(){
return function(items){
var filtered = items.filter(function(item){
if(item['status'] && item['status'].indexOf('SUCCESS') != -1){
return item;
}
})
return filtered;
}
});
更简单的方法。只需将 tr ng-repeat 修改为
<tr ng-repeat="cs in cSessions | filter:'SUCCESS'">
<td>{{cs.id}}</td>
<td>{{cs.session_name}}</td>
</tr>