Angular：在搜索栏中的用户类型之前阻止显示指令

Posted 2023-02-24

【中文标题】Angular：在搜索栏中的用户类型之前阻止显示指令

【英文标题】：Angular: Preventing Display of Directives Until User Types in Search Bar

【发布时间】：2017-01-12 18:39:01

【问题描述】：

我正在使用 Angular 在页面上显示具有角色的用户列表，并允许基于电子邮件地址进行过滤。这运行良好，但是 Angular 添加了很多 DOM 元素和观察者，这大大降低了页面速度。为防止出现此问题，我尝试仅在将文本输入搜索字段时才显示用户。

这是搜索框的代码和创建用户指令的 ng-repeat：

<!-- Search -->
<h3 class="heading">Showing<span ng-show="searchUsers.length"> filteredUsers.length of</span> users.length Users</h3>
<div id="search_users_container">
    <input type="search" name="search_users" id="search_users" placeholder="Search all users" ng-model="searchUsers" ng-value="" />
</div>
<!-- /Search -->

<!-- Users -->
<section id="users" class="cards masonry" ng-show="!searchUsers.length || filteredUsers.length" masonry="true" data-images-loaded="true">
    <!-- User Cards -->
    <user-card ng-model="user" ng-repeat="user in filteredUsers = (users | filter:  Email: searchUsers )" ng-show="searchUsers.length && filteredUsers.length"></user-card>
    <!-- /User Cards -->
</section>
<!-- /Users -->

在您在搜索栏中输入之前隐藏的用户，但它只是在视觉上隐藏了使用 ng-show 的用户，但他们仍然将它们添加到 DOM（我可以在 Chrome 开发工具中检查时看到）并且观察者是还是加了。

当我在搜索栏中输入时，用户被正确过滤，不匹配的用户被从 DOM 中删除，观察者的数量减少了，这很好。

我想做的是阻止 Angular 将用户添加到 DOM，直到我在搜索字段中输入。

有人对最好的方法有什么建议吗？

【问题讨论】：

ng-if 对你有用吗？元素从 DOM 中移除而不是不显示。

【参考方案1】：

使用 ng-if 代替 ng-show。这将从 DOM 中删除元素，而不是不显示它们。

【讨论】：

哇，这很简单！工作完美；我看到观察者减少了，并且观察者只在搜索结果出现后才添加。谢谢！我会投票，但需要更多的声望点。

没问题:)。如果它帮助和/或解决了您的问题，您可以将答案标记为已接受。

完成！谢谢安东尼：）