2015-09-04 118 views
1

我从后端获取一些对象。每个对象都有一个名为'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>

Live Demo

回答

2

你不必把逻辑控制器代码。你可以在你的HTML片段中使用$filter来实现它。检查下面的例子。你可以使你的过滤器结构更深,如你所愿。

<ul> 
    <li ng-repeat="project in projects | filter:{ PhaseIds : { name : 'student' } }">{{project.name}}</li> 
</ul> 

请检查您的plunker。我已经更新了它

+0

为静态目的可能是这个工作。但我正在寻找动态更新。我的情况下,每个'学生''老师'没有按钮像这样..根据用户点击(过滤器按钮)我需要显示不同的项目 – user2024080

+0

您可以在上面的代码片段中实现相同:-) – Vineet

+0

嘿vineet我试过你的解决方案..对我来说,当我尝试在JSFIDDLE它没有工作,你可以请检查我做错了什么.. 链接:https://jsfiddle.net/varun1989/w9qyqjz7/1/ – Varun

0

我喜欢@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); 
      } 
     }) 
    }) 
}); 
0

试试这个

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

0

你可以看到这里的解决方案 - 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逻辑。