Searching and Sorting angular JS

by Muhammad Irfan Khan

HTML

<div ng-app>
<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'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

Search: <input ng-model="searchText">
    
    <h2> Sort by Name</h2>
    
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText | orderBy:'name'">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>
    
    <h2> One way Sorting</h2>
    
    <table id="searchTextResults1">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText | orderBy:'name'">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>
    
    <h2> Two way Sorting</h2>
    <table id="searchTextResults2">
  <tr>
      <th> <a href="" ng-click="sortField ='name'; reverse = !reverse">Name</a></th>
      <th> <a href="" ng-click="sortField ='phone'; reverse = !reverse">Phone</a></th>
        
        </tr>
  <tr ng-repeat="friend in friends | filter:searchText | orderBy:sortField:reverse">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>

    
    
    
    
    </div>