Question

有没有什么好方法可以使用angular来过滤列表而不用重复？我不想首先使用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

Answer 2

您可以使用ng-show / ng-hide并将它们与li的值进行比较。

示例：

<input type="search" ng-model="search" placeholder="Search for fruits!" />

<ul>
  <li ng-show="matches('Banana')">Banana</li>
  <li ng-show="matches('Apple')">Apple</li>
  <li ng-show="matches('Orange')">Orange</li>
</ul>

在你的js：

$scope.matches = function (text) {
   var pattern = new Regexp(text, "gi")
   return pattern.test($scope.search);
}

但这很糟糕......使用ng-repeat / filter会更容易！

Answer 3

您可以使用ngIf，ngShow或ngHide执行此操作。

＆＃13;

<input type="search" ng-model="search" placeholder="Search for fruits!" />

<ul>
  <li ng-if="matches('Banana')">Banana</li>
  <li ng-if="matches('Apple')">Apple</li>
  <li ng-if="matches('Orange')">Orange</li>
</ul>

＆＃13;

$scope.matches = function(str) {
    return str.indexOf($scope.search) >= 0;
}

Answer 4

你可以把它作为Michel Tome写的更通用的方式。

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

<ul>
  <li ng-show="isSimilar($event)">Banana</li>
  <li ng-show="isSimilar($event)">Apple</li>
  <li ng-show="isSimilar($event)">Orange</li>
</ul>

在JS中从事件中获取文本。

$scope.isSimilar = function ($event) {
   var text = $event.target.textContent;
   var pattern = new Regexp(text, "gi")
   return pattern.test($scope.search);
}

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

4 个答案:

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