Javascript 通过带有AngularJS格式的过滤器？

我试着自学AngularJS，我盯着这段代码看了这么久，我的眼睛开始交叉

我有一个JSON文件

cats

，其中包含每个

cat

对象的属性

name

、

sex

、

color

、

pattern

和

picture

。（

sex

在本例中是一个布尔值；

0

表示女性，

1

表示男性。这很快就会回来。）

我使用以下代码循环浏览JSON文件并打印出一个包含所有

cat

对象的表，它工作正常（甚至稍微美化了格式）：

名称
性
颜色
图案
图画
{{kitty.name}大写}
女性
男性
{{kitty.color}大写}
{{kitty.pattern}大写}
没有图像

我现在想要的是允许用户单击复选框，例如“男性”，并更改视图以显示所有

cat

对象，其中

sex

为

1

。我可以通过替换以下内容来实现这一点：

…与

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

我已经尝试了各种ng模型以及给定复选框上的名称、ID和值，但是我还没有找到正确的语法，用它将参数

1

传递给repeat函数，让它根据需要过滤CAT

---

有人对如何将这两者绑定有什么想法吗？

您可以根据选中的复选框值动态发送筛选值

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

---

验证此示例

您可以根据选中的复选框值动态发送筛选器值

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

验证此示例

您可能需要此示例： HTML

名称
性
颜色
图案
图画
{{kitty.name}
{{kitty.sex？'男'：'女'}
{{kitty.color}}
{{kitty.pattern}
没有图像
男性


女性

普朗克：

你可能想要这个： HTML

名称
性
颜色
图案
图画
{{kitty.name}
{{kitty.sex？'男'：'女'}
{{kitty.color}}
{{kitty.pattern}
没有图像
男性


女性

---

PLUNKER:

所以当用户单击复选框时，您希望动态地将布尔值发送到过滤器。我的理解正确吗？所以当用户单击复选框时，您希望动态地将布尔值发送到过滤器。我的理解正确吗？非常感谢！这提供了确切的功能，我正在寻找。非常感谢！这提供了我想要的确切功能。

<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>