Question

我正在努力教自己AngularJS，我一直盯着这段代码，我的眼睛开始越过。

我有一个cats的JSON文件，其中包含每个name，sex，color，pattern和picture的属性{1}}对象。（cat在这种情况下是布尔值; sex用于女性，0用于男性。这将很快恢复。）

我使用以下代码循环遍历JSON文件并打印出所有1个对象的表格，并且它可以正常工作（甚至可以稍微优化格式化）：

cat

我想要的现在是允许用户点击复选框，例如“男性”，并将视图更改为显示<table> <tr> <th>Name</th> <th>Sex</th> <th>Color</th> <th>Pattern</th> <th>Picture</th> </tr> <tr ng-repeat="kitty in cats"> <td>{{kitty.name|capitalize}}</td> <td ng-if="kitty.sex == 0">Female</td> <td ng-if="kitty.sex == 1">Male</td> <td>{{kitty.color|capitalize}}</td> <td>{{kitty.pattern|capitalize}}</td> <td ng-if="kitty.picture"><img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}"></td> <td ng-if="!kitty.picture">NO IMAGE</td> </tr> </table>为cat sex的所有1个对象。我可以通过替换：

来实现这一目标

<tr ng-repeat="kitty in cats">

...与...

<tr ng-repeat="kitty in cats | filter:{'sex': 1}">

...但是出于显而易见的原因，我更希望动态地使用此功能，而不是硬编码。

我在给定的复选框上尝试了各种ng模型以及名称，ID和值，但我还没有弄清楚将参数1传递给repeat函数的正确语法，根据需要过滤猫。

有没有人对如何约束这两者有任何想法？

Answer 1

您可以根据所选的复选框值动态发送过滤值。

<table ng-repeat="cat in cats | filter : { sex: selectedGender }" style="width:300px">

验证此示例http://fiddle.jshell.net/w9darn8a/2/

Answer 2

你可能想要这个： HTML

<table>
  <tr>
    <th>Name</th>
    <th>Sex</th>
    <th>Color</th>
    <th>Pattern</th>
    <th>Picture</th>
  </tr>
  <tr ng-repeat="kitty in cats | filter : {sex: genderFilter}">
    <td>{{ kitty.name }}</td>
    <td>{{ kitty.sex ? 'Male' : 'Female' }}</td>
    <td>{{ kitty.color }}</td>
    <td>{{ kitty.pattern }}</td>
    <td ng-if="kitty.picture">
      <img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}">
    </td>
    <td ng-if="!kitty.picture">NO IMAGE</td>
  </tr>
</table>

<label>
  <input type="checkbox" 
         ng-true-value="1" 
         ng-false-value 
         ng-model="genderFilter">Male
</label><br>
<label>
  <input type="checkbox" 
         ng-true-value="0" 
         ng-false-value 
         ng-model="genderFilter">Female
</label>

PLUNKER：http://plnkr.co/edit/av2cyzJmwxJLkqhSFnOv?p=preview

在AngularJS中传递带有表单的过滤器？

2 个答案: