Question

我正在使用ng-repeat来遍历书籍列表。我正在尝试使用复选框来过滤书籍类型（kindle，平装本，精装本）。复选框正在过滤数据，但一次只能检查三个中的一个。如果我尝试检查第二个，则第一个取消检查。我不知道为什么以及如何解决这个问题。我有这个ng-repeat：

<tr ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor ">

我的复选框看起来像这样：

<label><input type="checkbox" ng-model="searchingFor.BOOKTYPE" name="HardbackCheckBox" ng-true-value="'H'" ng-false-value="''">Hardback</label>&nbsp;
<label><input type="checkbox" ng-model="searchingFor.BOOKTYPE" name="KindleCheckBox" ng-true-value="'K'" ng-false-value="''">Kindle</label>&nbsp;
<label><input type="checkbox" ng-model="searchingFor.BOOKTYPE" name="PaperbackCheckBox" ng-true-value="'P'" ng-false-value="''">Paperback</label>

任何帮助将不胜感激。感谢

Answer 1

对于所有三个复选框ng-model="searchingFor.BOOKTYPE"都相同。我认为这会导致问题

Answer 2

ng-model行为三者都相同。 ng-value可以创建子范围。所以这应该有用。

像这样更改你的代码

<input type="checkbox" ng-model="searchingFor.BOOKTYPE" ng-value="{{det.value}}">

Answer 3

这是我为了让它发挥作用所做的一切。我对AngularJS很新，所以它可能不是最好的解决方案，但它现在正在运作。

1。）我在复选框上更改了模型，建议：

<label>Hardback</label><input  type="checkbox" ng-model="Filter.H" ng-true-value="'H'"  ng-false-value=''  /><br/> 
<label>Kindle</label><input  type="checkbox" ng-model="Filter.K" ng-true-value="'K'"  ng-false-value=''  /><br/>
<label>Paperback</label><input  type="checkbox" ng-model="Filter.P" ng-true-value="'P'"  ng-false-value=''  />

2.）我在ng-repeat上添加了一个名为chooseBookTypes的过滤器：

<tr ng-repeat="det in details | orderBy:['-YEAR_READ','-UniqueCounter'] | filter:searchingFor | filter:chooseBookTypes">

3.。）在我的控制器中编写了一个函数，用于检查每个Filter模型的真实值。 BOOKTYPE是我在JSON中检查的领域。

$scope.chooseBookTypes = function(det){
return det.BOOKTYPE === $scope.Filter.P || det.BOOKTYPE === $scope.Filter.H ||  det.BOOKTYPE === $scope.Filter.K;
};

4。）这是可选的，但默认情况下我想要检查每个复选框，所以在我的控制器中我将每个Filter模型的值设置为ng-true-value：

$scope.Filter = {
   H: 'H',
   K: 'K',
   P: 'P'
 };

使用复选框进行AngularJS过滤就像单选按钮一样工作

3 个答案: