Custom Array Filter Example

HTML

<script src="http://code.angularjs.org/0.9.17/angular-0.9.17.js" ng:autobind></script>

<!-- AngularJS Example Code: -->
<div ng:controller="FilterCtrl">
    <div ng:init="friends = [{name:'John', phone:'555-1276'},
                             {name:'Mary', phone:'800-BIG-MARY'},
                             {name:'Mike', phone:'555-4321'},
                             {name:'Adam', phone:'555-5678'},
                             {name:'Julie', phone:'555-8765'}]"></div>
     Search: <input name="searchText"/>
    <table id="searchTextResults">
      <tr><th>Name</th><th>Phone</th><tr>
      <tr ng:repeat="friend in friends.$filter(doFilter)">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      <tr>
    </table>
</div>

CSS

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

function FilterCtrl() {
    var scope = this;
    scope.doFilter = function(elem) { 
        if(!scope.searchText) return true;
        return elem.name.toLowerCase().indexOf( scope.searchText.toLowerCase()) == 0 && elem.phone.indexOf(scope.searchText) == 0;
    };
         
}