AngularJsの検索テキストに基づいてアイテムのリストをフィルタリングする方法は？

Question

私はNGリピートを使用していない静的な項目のリストを持っている上記のコードで..

<input type="text" ng-model="filter"> 
<ul> 
      <li class="menu-heading Heading-mob">PERSONAL SETTINGS</li> 
      <li class="active first_child hvr-bounce-to-left"> 
       <a href="@Url.Action("Password", "Account")" target="_blank"> 
        <i class="nc-icon-mini objects_key-26"></i> 
        <span>Change Password</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="hvr-bounce-to-left"> 
       <a href="@Url.Action("AccountInfo", "Account")" target=" _blank"> 
        <i class="nc-icon-mini ui-e_square-e-info"></i> 
        <span>Account Information</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="hvr-bounce-to-left"> 
       <a href="@Url.Action("SecurityQuestion", "Account")" target="_blank"> 
        <i class="nc-icon-mini ui-1_lock-open"></i> 
        <span>Security Question</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="menu-heading active ">APP SETTINGS</li> 
      <li class="hvr-bounce-to-left" ng-click="selectAppSetting('userType')"> 
       <a ui-sref="appSetting.userTypeList" ng-class="{'active': selectedAppSetting === 'userType'}"> 
        <i class="nc-icon-mini users_single-04"></i> 
        <span>User Types</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="hvr-bounce-to-left" ng-click="selectAppSetting('App Templates')"> 
       <a ui-sref="appSetting.appTemplates" ng-class="{'active': selectedAppSetting === 'App Templates'}"> 
        <i class="nc-icon-mini users_single-04"></i> 
        <span>App Templates</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="hvr-bounce-to-left" ng-click="selectAppSetting('PublishApps')"> 
       <a ui-sref="appSetting.publish" ng-class="{'active': selectedAppSetting === 'PublishApps'}"> 
        <i class="nc-icon-mini ui-2_grid-48"></i> 
        <span>Publish Apps</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
      <li class="hvr-bounce-to-left" ng-click="selectAppSetting('Roles')"> 
       <a ui-sref="appSetting.roleList" ng-class="{'active': selectedAppSetting === 'Roles'}"> 
        <i class="nc-icon-mini users_square-32"></i> 
        <span>Roles</span> 
       </a> 
       <a href=""><i class="nc-icon-glyph ui-3_card-add no-border"></i></a> 
      </li> 
</ul> 

のような項目の静的なリストを持っています。私はテキストフィールドを持っています。入力テキストにテキストを入力すると、AngularJsを使用してリストをフィルタリングします。入力タイプのテキストにはng-model = "filter"が含まれているので、ulタグの項目のフィルターリストにパイプ記号を使用します。

Answer 1

ng-repeatを使用して要素にフィルタを提供する必要があります。したがって、ng-repeatを実装します。

最初にオブジェクトを作成し、配列にカプセル化します。 次に、ng-repeatでその配列を繰り返します。

例：

var arrayItems= [{url: 'something1', text: 'accountInformation'}];//add other information as necessary in object. 

<input type="text" ng-model="search"> 
<ul> 
    <li>Personal settings</li> 
    <li ng-repeat="item in arrayItems | filter:search"> 
    <a href="item.url" target="_blank"> 
       <i class="nc-icon-mini objects_key-26"></i> 
       <span>{{item.text}}</span> 
    </a> 
    </li> 

</ul> 

更新：NGリピートなしのソリューションのために。このlinkに従ってください。