Angular: Preventing Display of Directives Until User Types in Search Bar
我正在与Angular合作，显示页面上具有角色的用户列表，并允许基于电子邮件地址进行筛选。这很有效，但是Angular添加了很多DOM元素和观察者，这大大降低了页面的速度。为了避免这个问题，我只想在文本输入搜索字段时显示用户。
下面是搜索框和ng repeat创建用户指令的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Search --> <h3 class="heading">Showing<span ng-show="searchUsers.length"> {{filteredUsers.length}} of</span> {{users.length}} Users <input type="search" name="search_users" id="search_users" placeholder="Search all users" ng-model="searchUsers" ng-value="" /> <!-- /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 dev工具中检查时我可以看到)，观察者仍然被添加。
当我在搜索栏中输入时，用户被正确过滤，不匹配的用户被从dom中删除，观察者的数量减少，这是很好的。
我想做的是防止Angular在输入搜索字段之前将用户添加到DOM中。
有人对最好的方法有什么建议吗？
使用ng if而不是ng show。这将从DOM中删除元素，而不是不显示它们。