如何通过循环它的对象的子数组来过滤父对象

时间:2015-09-04 06:17:38

标签: arrays angularjs angular-filters

我从后端获取了一些对象。每个对象都有一个名为' phaseIds'的子数组,它有多个对象数组,从我需要的数组中找到" name"根据过滤器存在..

一旦我过滤了,该对象需要在页面中显示。我尝试了但是我没有得到结果。有没有人帮我正确地做到这一点?

目前我是学生过滤的,但我得到的所有物品都没有过滤。



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>
&#13;
&#13;
&#13;

Live Demo

4 个答案:

答案 0 :(得分:3)

您无需将逻辑放在控制器代码中。您也可以使用<ul> <li ng-repeat="project in projects | filter:{ PhaseIds : { name : 'student' } }">{{project.name}}</li> </ul> 在HTML代码段中实现此功能。请查看以下示例。您可以根据需要使滤镜结构更深。

    .content-wrapper .step1description p:after {

    content: '';
    position: absolute; 
    width: 100%;
    height:  5px; 
    display: inline-block;
    background-position: center;
    background-image: url(http://i.imgur.com/Wrk0SFT.png); 
    top: 0; 
}

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

答案 1 :(得分: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);
            }
        })
    })
});

答案 2 :(得分: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,您将根据您的要求获得这样的对象结构。

[   {"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"
    }]
}]]

答案 3 :(得分: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逻辑。