javascript - Angular filter list without ng-repeat -

NG- Is there a good way to use angular to filter a list without repeating? I do not want to use javascript for the first time to attract the list, but I want to use angular to filter it later.

Example:

< Pre class = "snippet-code-html lang-html prettyprint-override"> & lt; Input type = "search" ng-model = "search" placeholder = "search for fruits!" / & Gt; & Lt; Ul & gt; & Lt; Li & gt; Banana & lt; / Li & gt; & Lt; Li & gt; Apple & lt; / Li & gt; & Lt; Li & gt; Orange & lt; / Li & gt; & Lt; / Ul & gt;

I want to use the search box to filter the existing HTML.

(Please do not give any examples with ng-repeat or jQuery in general)

You can write a simple command to handle / show:

  app.directive ('filterList', function ($ timeout) {return} {link: function (scope) , Element, attrs) {var li = Array.prototype.slice call (element [0]. Child); filter by function (value) {li.for eca (function (L) {el.className = el.textContent.toLowerCase (). IndexOf (value.toLowerCase ()) == -1 '': 'ng-hide';});} scope. $ Watch (attrs.filterList, function (newwell, oldname G) {if (Nuval! == Old val) {filterBy (newVal);}})}}};});  

And use it like this:

  & lt; Input type = "search" ng-model = "search" placeholder = "fruit search!" / & Gt; {{Search}} & lt; Ul filter-list = "search" & gt; & Lt; Li & gt; Banana & lt; / Li & gt; & Lt; Li & gt; Apple & lt; / Li & gt; & Lt; Li & gt; Orange & lt; / Li & gt; & Lt; / Ul & gt;  

There are some benefits to using the command:

1). You do not have to put ngShow / ngIf directives on each li .

2). It will also work with the new enclosure li elements in the list.

Demo: