有没有什么好的方法可以使用角度来过滤列表而不用重复？我不想首先使用
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的例子)
解决方法
您可以编写一个简单的指令来处理show / hide：
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元素到列表中.
