角度：検索バーにユーザータイプが入力されるまでの指示の表示を防止する

Question

Angularを使用して、ページに役割を持つユーザーの一覧を表示し、電子メールアドレスに基づいてフィルタリングを許可します。これはうまくいっていますが、Angularは多くのDOM要素とウォッチャーを追加します。これはページの速度を大幅に低下させます。この問題を防ぐため、テキストを検索フィールドに入力したときにのみユーザーを表示しようとしています。ここで

は、検索ボックスのコードとユーザー・ディレクティブの作成ngのリピートです：あなたは、検索バーに入力されるまで隠されて

<!-- 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-をユーザーに隠し表示しますが、それらはDOMに追加されます（Chrome開発ツールをいつ調べるかはわかります）。ウォッチャーはまだ追加されています。

検索バーに入力すると、ユーザーが正しくフィルタリングされ、一致しないユーザーがDOMから削除され、ウォッチャーの数が減りました。

私が検索フィールドに入力するまでAngularがユーザーをDOMに追加しないようにします。

これを行う最善の方法はありますか？

Answer 1

ng-showの代わりにng-ifを使用します。 DOMを表示しないでDOMから要素を削除します。