有没有什么好的方法可以使用角度来过滤列表而不用重复?我不想首先使用
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元素到列表中.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。