如何通过循环对象的子数组来过滤父对象
问题描述:
我从后端获取一些对象。每个对象都有一个名为'phaseIds'的子数组,它具有多个对象数组,我需要根据该过滤器找到“名称”存在的数组..如何通过循环对象的子数组来过滤父对象
一旦我过滤了,那个对象需要在页面中显示。我试过了,但我没有得到结果。任何人用正确的方式帮助我做到这一点?
目前我是由学生过滤,但我没有过滤所有的对象。
var app = angular.module('myApp', []);
var projects = [
{"name":"one", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"},
{id:"3",name:"teacher"}
]},
{"name":"two", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]},
{"name":"three", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"}
]},
{"name":"four", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]},
{"name":"five", "PhaseIds":[
{id:"1",name:"school"},
{id:"3",name:"teacher"}
]}
]
app.controller('MainCtrl', function($scope) {
$scope.projects = angular.forEach(projects, function (project) {
var filteredProject = project;
angular.forEach(project.PhaseIds, function (phase) {
if(phase.name.toLowerCase().indexOf('student') > -1){
//only required the students avilable projects
return filteredProject;
}
})
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<ul>
<li ng-repeat="project in projects">{{project.name}}</li>
</ul>
</div>
答
你不必把逻辑控制器代码。你可以在你的HTML片段中使用$filter
来实现它。检查下面的例子。你可以使你的过滤器结构更深,如你所愿。
<ul>
<li ng-repeat="project in projects | filter:{ PhaseIds : { name : 'student' } }">{{project.name}}</li>
</ul>
请检查您的plunker。我已经更新了它
答
我喜欢@Vineet解决方案,但如果你需要从控制器使用JSON发挥正确的代码应该是:
app.controller('MainCtrl', function ($scope) {
$scope.projects = [];
angular.forEach(projects, function (project) {
var filteredProject = project;
angular.forEach(project.PhaseIds, function (phase) {
if (phase.name.toLowerCase().indexOf('student') > -1) {
//only required the students avilable projects
$scope.projects.push(filteredProject);
}
})
})
});
答
试试这个
app.controller('MainCtrl', function($scope) {
$scope.projects = [];
angular.forEach(projects, function (project) {
var filteredProject = project;
angular.forEach(project.PhaseIds, function (phase) {
if(phase.name.toLowerCase().indexOf('student') > -1){
//only required the students avilable projects
$scope.projects = $scope.projects.concat(filteredProject)
}
})
})
});
HRE是Plunker
编辑:
使用CONCAT你将GE像这样的对象结构按照您的要求。
[ {"name":"one", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"},
{id:"3",name:"teacher"}
]},
{"name":"three", "PhaseIds":[
{id:"1",name:"school"},
{id:"2",name:"student"}
]}
]
而且使用推你会得到这样的
[0: [{
"name": "one",
"PhaseIds": [{
id: "1",
name: "school"
},
{
id: "2",
name: "student"
},
{
id: "3",
name: "teacher"
}]
}],
1: [{
"name": "three",
"PhaseIds": [{
id: "1",
name: "school"
},
{
id: "2",
name: "student"
}]
}]]
+0
为什么'concat'而不是“推” - 有什么特别的原因? – user2024080
答
你可以看到这里的解决方案 - http://plnkr.co/edit/seIfZlhIbUnYMhWdEpGr
var filterProjectData = function(projects) {
var filteredProjects = [];
angular.forEach(projects, function (project) {
angular.forEach(project.PhaseIds, function (phase) {
if(phase.name.toLowerCase().indexOf('student') > -1){
//only required the students avilable projects
filteredProjects.push(project);
}
});
});
return filteredProjects;
}
$scope.projects = filterProjectData(projects);
没有智商更高。我只是调整了你的foreach逻辑。
为静态目的可能是这个工作。但我正在寻找动态更新。我的情况下,每个'学生''老师'没有按钮像这样..根据用户点击(过滤器按钮)我需要显示不同的项目 – user2024080
您可以在上面的代码片段中实现相同:-) – Vineet
嘿vineet我试过你的解决方案..对我来说,当我尝试在JSFIDDLE它没有工作,你可以请检查我做错了什么.. 链接:https://jsfiddle.net/varun1989/w9qyqjz7/1/ – Varun