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

Posted

技术标签:

【中文标题】没有 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】:

您可以使用ngIfngShowngHide 执行此操作。

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

【讨论】:

以上是关于没有 ng-repeat 的角度过滤器列表的主要内容,如果未能解决你的问题,请参考以下文章

用于未定义属性的 ng-repeat 过滤器

角度重复 <span> n 次

角度获取过滤后的 ng-repeat 的长度

用于ng-repeat的多个角度滤波器 - 有更好的方法吗?

在角度 1 中,如何对我的 ng-repeats 进行分页?

如何在带有ng-repeat的角度js表中使用复选框数组和文本区域/下拉列表数组?