如何仅在用户使用过滤器时显示 ng-repeat 元素

Question

只有当用户使用某些过滤器时，我才会知道如何显示我的元素。

例如：

$scope.elements = [{name : 'Pablo', age : 23}, {name : 'Franco', age : 98}];

<input type="text" ng-model="searchText" />
<div ng-repeat="element in elements | filter:searchText">
      <p>{{ element.name }}</p>
</div>

如果用户没有写入输入类型文本标签，我不想显示过滤后的列表。或者与输入类型复选框、单选框、select 标签相同...

我能做的就是使用 ng-show 指令

<div ng-repeat="element in elements | filter:searchText" ng-show="searchText.length > 0">
      <p>{{ element.name }}</p>
</div>

但这似乎不合法。

有更好的主意吗？或者显然，一个本地解决方案。

提前谢谢你。

Answer 1

您可以使用 ng-if 这样代码不会运行直到满足条件。

<div ng-repeat="element in elements | filter:searchText" ng-if="searchText.length > 0">
      <p>{{ element.name }}</p>
</div>

Answer 2

请检查这个

$scope.elements = [{name : 'Pablo', age : 23}, {name : 'Franco', age : 98}];

<input type="text" ng-model="searchText.name" />
<div ng-repeat="element in elements | filter:searchText">
      <p>{{ element.name }}</p>
</div>

希望这有效。

如何仅在用户使用过滤器时显示 ng-repeat 元素

How to display ng-repeat elements only if user uses filters

javascript

angularjs

angularjs-ng-repeat