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

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

1 个答案: