没有ng-repeat的角度过滤器列表

Question

有没有什么好的方法可以使用angular来过滤列表而不用ng-repeat？我不想首先使用javascript绘制列表,但我想使用angular来过滤它.

例:

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

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

我想使用搜索框来过滤现有的html.

(请不要给出任何关于ng-repeat或jQuery的例子)

Answer 1

您可以编写一个简单的指令来处理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);
                }
            });
        }
    };
});

并以这种方式使用它:

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

使用指令有几个好处:

1).您不必ngShow/ngIf在每个指令上放置任何指令li.

2).它还可以使用新的附加li元素到列表中.

演示:http://plnkr.co/edit/wpqlYkKeUTfR5TjVEEr4？p = preview