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

【问题标题】：Angular filter list without ng-repeat没有 ng-repeat 的角度过滤器列表
【发布时间】：2014-12-23 20:36:58
【问题描述】：

有没有什么好的方法可以使用 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 的例子）

【问题讨论】：

使用角度过滤器可能无法做到这一点。您必须编写自己的过滤方法。
@m.brand 使用角度过滤器和 ngRepeat 是很自然的方法。没有它也很简单。
你可以写一个非常简单的指令来做。
是的，没错。它不会像使用 ng-repeat 那样放置过滤器那么简单。
@m.brand 是的，但 OP 可能正在寻找其他有趣的方式来进行学习。为什么不呢！

标签： javascript html angularjs angularjs-ng-repeat

【解决方案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)。您不必在每个 li 上放置任何 ngShow/ngIf 指令。

2)。它还可以与列表中添加的新 li 元素一起使用。

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

【讨论】：

太好了，我可以在一些项目中使用它。 :)
谢谢，但是如果那个菜单和子菜单有一些折叠操作，当你搜索然后清除搜索时它就不起作用了，有什么办法解决吗？
@tinyCoder 取决于这种“崩溃”是如何发生的
在侧边栏这里，请看：adminlte.io/themes/AdminLTE/index.html#
我建议在单独的plunk中隔离问题，你可以fork我在答案中发布的那个，这样检查起来会更简单。

【解决方案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 会容易得多！

【讨论】：

ng-repeat 在这种情况下对 SEO 不够友好（以及所有这些）:)

【解决方案3】：

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

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

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

【讨论】：

【解决方案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);
}

【讨论】：