ng-if in tr-element 如果适用

Question

所以我有这个 table，我通过使用 ng-repeat 迭代对象列表来呈现它。我还可以通过将它们与 ng-model 一起列在一个元素中并让列表中的用户 select 来对一组预定义的字符串进行一些过滤。然后连同我的 ng-repeat 我有一个 ng-if 只显示那些通过过滤器的对象。但是，我还希望能够完全禁用过滤器并一次列出所有对象，这就是我的 ng-if 搞砸的地方。

示例数据：

[
  {
    "key": "val A"
  },
  {
    "key": "val B"
  },
  {
    "key": "val A"
  }
]

HTML代码：

<!-- List of strings to filter on -->
<select ng-model="keyFilter">
    <option>Val A</option>
    <option>Val B</option>
</select>

<!-- List objects in table -->
<table>
    <thead>...</thead>
    <tbody>
        <tr ng-repeat-start="object in objects"
            ng-if="object.key == keyFilter">
            ...
        </tr>
        <tr ng-repeat-end>
            <!-- Expandable inline table -->
        </tr>
    </tbody>
</table>

我得到它的工作，当我 select 'Val A' 或 'Val B' 在选项集中 table 更新并仅显示那些对象。但是，我真的不知道如何让所有对象同时显示。我想在 ng-if 之前初步检查 'keyFilter' 是否为空。也就是说，如果过滤器适用。

Answer 1

改变

ng-if="object.key == keyFilter"

到

ng-if="object.key === keyFilter || !keyFilter"

这样，如果没有 keyFilter (!keyFilter)，所有数据都会显示。

ng-if in tr-element 如果适用

ng-if in tr-element if applicable

javascript

angularjs

angularjs-ng-repeat