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

一尘不染

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

angularjs

有没有什么好方法可以使用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给出任何示例）

阅读 232

2020-07-04

共1个答案

一尘不染

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

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

2020-07-04