没有 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】:您可以使用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);
【讨论】:
以上是关于没有 ng-repeat 的角度过滤器列表的主要内容,如果未能解决你的问题,请参考以下文章
用于ng-repeat的多个角度滤波器 - 有更好的方法吗?