Javascript 无ng重复的角度过滤器列表

有没有什么好方法可以使用angular过滤列表而不重复ng？我不想先用javascript来绘制列表，但我想在之后用angular来过滤它

例如：

香蕉
苹果
橙色的

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

例如：

香蕉
苹果
橙色

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

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>

{{search}

香蕉
苹果
橙色的

使用指令有几个好处：

1） 。您不必在每个

li

上放置任何

ngShow/ngIf

指令

2） 。它还将使用添加到列表中的新

li

元素

---

演示：您可以使用

ngIf

、

ngShow

或

ngHide

进行此操作

香蕉
苹果
橙色

你可以像米歇尔·托米写的那样，用更一般的方式来写

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

---

使用角度过滤器可能无法做到这一点。您必须编写自己的过滤方法，而不是。@m.brand使用角度过滤器和ngRepeat是自然的方法。没有它也很简单。你可以写一个非常简单的指令来完成。是的，没错。它不会像你使用ng-repeat时那样简单。@m.brand是的，但OP可能正在寻找其他有趣的方式来进行勒宁。为什么不呢？ng repeat对SEO的友好性（以及所有这些）不足以满足这种情况：）太好了，我可以在一些项目中使用它谢谢，但是如果在该菜单和子菜单上有一些折叠操作，那么当您搜索并清除搜索时，它不再工作了，还有什么需要修复的吗？@tinyCoder取决于这个“折叠”事件是如何出现在侧边栏中的，请看一看：我建议在单独的plunk中隔离该问题，你可以把我在答案中贴的那一个叉出来，这样检查起来就更简单了。

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