Как отфильтровать список элементов по поисковому тексту в AngularJs?

Question

Как отфильтровать список элементов по поисковому тексту в AngularJs?

0

У меня есть статический список таких элементов, как..

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

durga siva kishore mopuru 20 апр. 2016, в 09:19

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

kushalvm · Accepted Answer · 2016-04-20T04-14-00.000Z

Вы должны предоставить фильтр элементу, используя 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. Следуйте по этой ссылке.

Я. Это правильно. Я знаю, используя фильтр с помощью ng-repeat, но я хочу фильтровать без использования ng-repeat
Спасибо @MegaRacer за доказательство ссылки. Это работает нормально
Замечательно ! Пожалуйста, отметьте ответ как принятый, если он помог вам достичь того, что вы хотели. :)