javascript - 在 AngularJS 中通过表单传递过滤器？

Question

我正在尝试自学 AngularJS，我已经盯着这段代码看了这么久，我的眼睛都开始交叉了。

我有一个 JSON 文件 cats包含属性 name , sex , color , pattern ，和picture对于每个 cat目的。 (sex 在本例中是一个 bool 值；0 代表女性，1 代表男性。这很快就会恢复。)

我使用以下代码循环遍历 JSON 文件并打印出所有 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>

我现在想要的是允许用户单击复选框，例如“男性”，并更改 View 以显示全部 cat对象在 sex是 1 。我可以通过替换来实现这一点:

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

...与...

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

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

我已经尝试了各种 ng-models 以及给定复选框上的名称、ID 和值，但我尚未找出传递参数 1 的正确语法。到重复功能，让它根据需要过滤猫。

有人对如何绑定(bind)这两者有任何想法吗？

Answer 1

你可能想要这个: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>

骗子:http://plnkr.co/edit/av2cyzJmwxJLkqhSFnOv?p=preview