javascript - Angular filter list without ng-repeat -

javascript - Angular filter list without ng-repeat -

is there way of using angular filter list without ng-repeat? dont want utilize javascript draw list @ first, want utilize angular filter afterwards.

example:

class="snippet-code-html lang-html prettyprint-override"><input type="search" ng-model="search" placeholder="search fruits!" /> <ul> <li>banana</li> <li>apple</li> <li>orange</li> </ul>

i want utilize search box filter existing html.

(please dont give examples ng-repeat or jquery in general)

you can write simple directive handle show/hide:

app.directive('filterlist', function($timeout) { homecoming { 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); } }); } }; });

and utilize way:

<input type="search" ng-model="search" placeholder="search fruits!" /> {{search}} <ul filter-list="search"> <li>banana</li> <li>apple</li> <li>orange</li> </ul>

there couple of benefits of using directive:

1). don't have set ngshow/ngif directives on every li.

2). work new appended li elements list.

demo: http://plnkr.co/edit/wpqlykkeutfr5tjveer4?p=preview

javascript html angularjs angularjs-ng-repeat