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

Posted 2023-03-05

【中文标题】没有 ng-repeat 的角度过滤器列表

【英文标题】：Angular filter list without 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 可能正在寻找其他有趣的方式来进行学习。为什么不呢！

【参考方案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);