Wie filtert man die Liste der Elemente basierend auf Suchtext in AngularJs?

Question

Ich habe statische Liste der Elemente wie ..

<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> 

In dem obigen Code i Liste der statischen Elemente habe ich nicht ng-repeat verwenden. Ich habe ein Textfeld. Wenn ich Text in den Eingabetext gebe, möchte ich die Liste mit AngularJs filtern. Der Text des Eingabetyps enthält ng-model = "filter", also verwende ich das Pipe-Symbol für die Filterliste der Elemente im ul-Tag.

Answer 1

Sie müssen dem Element einen Filter bereitstellen, indem Sie ng-repeat verwenden. Also implementiere eine ng-Wiederholung.

zunächst ein Objekt konstruieren, und es in der Anordnung einzukapseln. iteriert dann, dass Array mit ng-repeat

Eg.

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> 

aktualisieren: Für eine Lösung ohne ng-repeat. Befolgen Sie diese link.