Question

我正在与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，直到我输入搜索字段。

有没有人对最佳方法有任何建议？

Answer 1

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

Angular：防止显示指令直到搜索栏中的用户类型

1 个答案: