角筛选器列表不NG-重复 [英] Angular filter list without ng-repeat

问题描述

有采用了棱角分明过滤无NG重复名单什么好办法？我不想使用JavaScript首先绘制的清单，但我想用角事后过滤。

例如：

\r

\r

＆LT;输入类型=搜索NG-模式=搜索占位符= 搜索水果！ /＆GT;\r
\r
＆LT; UL＆GT;\r
  ＆LT;立GT; Banana和LT; /李＆GT;\r
  ＆LT;立GT;苹果＆LT; /李＆GT;\r
  ＆LT;立GT;橙色与LT; /李＆GT;\r
＆LT; / UL＆GT;

\r

\r

\r

我想使用的搜索框来筛选现有的HTML。

（请不要放弃与一般的NG-重复或jQuery的任何实例）

解决方案

您可以编写一个简单的指令来处理显示/隐藏：

  app.directive（'filterList'，函数（$超时）{
    返回{
        链接：功能（范围，元素，ATTRS）{            VAR李= Array.prototype.slice.call（元素[0]。儿童）;            功能filterBy（值）{
                li.forEach（功能（EL）{
                    el.className = el.textContent.toLowerCase（）的indexOf（value.toLowerCase（））！== -1？ ''：'NG隐藏';
                }）;
            }            范围。$腕表（attrs.filterList，功能（的newval，OLDVAL）{
                如果（的newval！== OLDVAL）{
                    filterBy（的newval）;
                }
            }）;
        }
    };
}）;
 

和使用这种方式：

 ＆LT;输入类型=搜索NG-模式=搜索占位符=！搜索水果 /＆GT; {{搜索}}＆LT; UL过滤列表=搜索＆GT;
    ＆LT;立GT; Banana和LT; /李＆GT;
    ＆LT;立GT;苹果＆LT; /李＆GT;
    ＆LT;立GT;橙色与LT; /李＆GT;
＆LT; / UL＆GT;
 

有一对夫妇使用指令的好处：

1）。你不必把任何 ngShow / ngIf 指令每里。

2）。它还将与新追加里元素的工作列表中。

演示：<一href=\"http://plnkr.co/edit/wpqlYkKeUTfR5TjVEEr4?p=$p$pview\">http://plnkr.co/edit/wpqlYkKeUTfR5TjVEEr4?p=$p$pview

Is there any good way of using angular to filter a list WITHOUT ng-repeat? I dont want to use javascript to draw the list at first, but i want to use angular to filter it afterwards.

Example:

<input type="search" ng-model="search" placeholder="Search for fruits!" />

<ul>
  <li>Banana</li>
  <li>Apple</li>
  <li>Orange</li>
</ul>

I want to use the search box to filter the existing html.

(Please dont give any examples with ng-repeat or jQuery in general)

解决方案

You can write a simple directive to handle show/hide:

app.directive('filterList', function($timeout) {
    return {
        link: function(scope, element, attrs) {

            var li = Array.prototype.slice.call(element[0].children);

            function filterBy(value) {
                li.forEach(function(el) {
                    el.className = el.textContent.toLowerCase().indexOf(value.toLowerCase()) !== -1 ? '' : 'ng-hide';
                });
            }

            scope.$watch(attrs.filterList, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    filterBy(newVal);
                }
            });
        }
    };
});

and use it this way:

<input type="search" ng-model="search" placeholder="Search for fruits!" /> {{search}}

<ul filter-list="search">
    <li>Banana</li>
    <li>Apple</li>
    <li>Orange</li>
</ul>

There are a couple of benefits of using a directive:

1). You don't have to put any ngShow/ngIf directives on every li.

2). It will also work with a new appended li elements to the list.

Demo: http://plnkr.co/edit/wpqlYkKeUTfR5TjVEEr4?p=preview

这篇关于角筛选器列表不NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！