如何根据AngularJs中的搜索文本过滤项目列表？

Question

我有静态的项目列表，例如..

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

在上面的代码中，我有我没有使用 ng-repeat 的静态项目列表。我有文本字段。当我在输入文本上输入文本时，我想使用 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-repeat 的解决方案。关注此link。