AngularJS ng-repeat 通过文本和多个复选框进行过滤

Question

我有一组数据，其中包含姓名、年份、身高、体重和运动等属性。我的数据中将有两种或多种运动类型，我希望能够使用复选框和文本搜索来缩小 ng-repeat 的结果。作为一个有角度的菜鸟，我在设置它时遇到了麻烦。到目前为止，我的工作代码非常少。有没有一种简单的方法可以做到这一点？有没有一种简单的方法可以只用两项运动来完成这项工作？ （这两个复选框目前没有链接到任何东西，它们只是当前 html 的示例）。

index.html

<div ng-controller="controller">
<input class="p-search" ng-model="query" placeholder="search anything">

<input class="sport-toggle baseball" type="checkbox" checked>
<input class="sport-toggle football" type="checkbox" checked>

<div class="player-card" ng-repeat="player in roster | filter: query">
    <div>player {{info}}</div>
</div>
</div>

controller.js

var rosterfy = angular.module('rosterfy', []);
rosterfy.controller('controller', function controller($scope) {
$scope.roster = [
    {
...a bunch of json data....
}
];
});

Answer 1

需要在复选框和输入字段上添加 ng-model 并将查询传递给 filter: 作为对象。查询对象的属性应与 JSON 的属性相同。 HTML：

<div ng-controller="controller">
   <input class="p-search" ng-model="query.Name" placeholder="search anything">

   <input class="sport-toggle baseball" type="checkbox" ng-model="query.check1" checked>
   <input class="sport-toggle football" type="checkbox" ng-model="query.check2" checked>

   <div class="player-card" ng-repeat="player in roster | filter: query">
   <div>player {{player.Name}}</div>
  </div>
</div>

Controller.js

var rosterfy = angular.module('rosterfy', []);
rosterfy.controller('controller', function controller($scope) {
  $scope.roster = [{
   Name:"Steve",
   check1:true,
   check2:false
   },{
   Name:"Michael",
   check1:false,
   check2:true
   },{
   Name:"James",
   check1:true,
   check2:false
   },{
   Name:"Peter",
   check1:true,
   check2:true
   }];
});

这是一个 JSBin 工作示例：Example