使用 AngularJS 过滤表答案

【问题标题】：Filter Table Using AngularJS使用 AngularJS 过滤表
【发布时间】：2017-07-22 20:26:09
【问题描述】：

我还有一个 AngularJS 控制器，看起来像这样：

app.controller('StudentController', ['$scope', function($scope) {
   $scope.filter: {
      hobby: {
        football: false,
        tennis: false,
        soccer: false
     }
   }
   $scope.students: [
      {   
         name: John,
         hobby: [soccer, football, tennis]
      },
      {
         name: James,
         hobby: [soccer, tennis]
      }
  ]
]);

在 html 方面，我有一些复选框和一个显示学生表的表格：

<input type="checkbox" ng-model="filter.hobby.soccer"><label>Soccer</label>
<input type="checkbox" ng-model="filter.hobby.tennis"><label>Tennis</label>
<input type="checkbox" ng-model="filter.hobby.football"><label>Football</label>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Hobbies</th>
    </tr>
  </thead>
  <tbody ng-repeat="student in students">
    <tr ng-hide="rotation.hideRotation">
      <td>{{ student.name }}</td>
      <td>{{ student.hobby.join(', ')  }}</td>
    </tr>
  </tbody>
</table>

我想知道如何使用 AngularJS 过滤表格。例如，当我点击复选框过滤足球时，只有詹姆斯会出现。

【问题讨论】：

如果可能，请考虑提供Minimal, Complete, and Verifiable example。这样，SO 的志愿者更有可能为您提供帮助。
我同意@lealceldeiro + 你的 json 不正确。

标签： javascript angularjs filter html-table

【解决方案1】：

首先，你的json不正确，应该是：

{    
"students": [
        {   
           "name": "John",
           "hobby": [
              {"sport": "soccer"}, 
              {"sport": "football"}, 
              {"sport": "tennis"}
           ]
        },
        {   
           "name": "James",
           "hobby": [
              {"sport": "soccer"}, 
              {"sport": "tennis"}
           ]
        }
    ]
}

答案是有一个angular.ForEach 循环：

$scope.selectedStudents = [];
angular.ForEach(studentsArr,function(value,key){
   // looping on each student's hobbies
   angular.ForEach(value.hobby,function(value2,key2){
     if(value2.sport == $scope.searchForSport) { 
       $scope.selectedStudents.push(value)
     }
  })
})

【讨论】：