Angularjs filter unordered list

Question

I'm trying to filter strings in a static unordered list. I'm able to filter items in an array but not sure how to do it for static html content.

The way I've learned to achieve it using an array is by using this method:

<input type="search" ng-model="name" />

<ul>
    <li ng-repeat="person in people | filter:name">
    {{ person }}
    </li>
</ul>

I'm trying to achieve the same effect using an existing <ul>

<input type="search" ng-model="filter.name" placeholder="filter..." />

<ul>
   <li><a href="#bob">Bob</a>/li>
   <li><a href="#lisa">Lisa</a></li>
   <li><a href="#lewis">Lewis</a></li>
   <li><a href="#xuemin">Xuemin</a></li>
   <li><a href="#tom">Tom</a></li>
   <li><a href="#cassidy">Cassidy</a></li>
</ul>

I want to be able to filter the list items based on the text strings inside them, so for example typing 'L' in the textbox would only show:

• Lisa
• Lewis

Answer 1

Here is a hacked out way of doing it JSFiddle.

The key to it is in ng-change="filter()". Every time you enter a letter you decide which elements to show or hide.

$scope.filter = function() {
    var elem = document.getElementById('list');
    for (var i = 0; i < elem.children.length; i++) {
        var name = elem.children[i].children[0].innerHTML;
        if (name.indexOf($scope.name) != -1 || $scope.name == "") {
              elem.children[i].style.display = "block";
        } else {
            elem.children[i].style.display = "none";
        }
    }
}

Like I said, it's an ugly hack, but it works. You would be better off making an object out of your names, and using ng-repeat.