筛选表使用AngularJS

-1

我也有一个AngularJS控制器，它看起来是这样的：筛选表使用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过滤表格。例如，当我点击复选框来过滤足球时，只有James会出现。

来源

2017-03-02 chinloong

请考虑提供[最小，完整，可验证示例]（http://stackoverflow.com/help/mcve）。这样，SO上的志愿者更有可能帮助你。 – lealceldeiro

我同意@lealceldeiro +您的json不正确。 –

首先，你的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) 
    } 
    }) 
})

来源

2017-03-02 22:21:49

筛选表使用AngularJS

回答

相关问题