Sort and Filter SharePoint List Data with Angular JS

Angular JS is a Javascript that extends HTML with new attributes and allows you to create declarative templates and do data-binding. If you want to learn more about Angular go here.  I have heard a lot about Angular and wanted to try it out so here is how I got it working on a SharePoint 2010 site.

Fist I included all my dependencies on the page

<script src="/SiteAssets/jquery-1.12.0.min.js"></script>
<script src="/SiteAssets/angular.min.js"></script>

First I created a new app and defined some variables

 
<script type="text/javascript">
// make a new app and give it a new 
angular.module('spApp',[])

.controller("contactController", function($scope){    
    GetListItems($scope, "ContactList");   // calling this function to get items from my list and add them to my scope
  $scope.sortType     = ''; // set the default sort type
  $scope.sortReverse  = true;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term
    
});  

function GetListItems($scope, listName){    //this function gets all the items from the list
    $.ajax({    
        url: "/_vti_bin/listdata.svc/"+listName+"?select=FullName",    // this is specific to SP2010 the URL is different for 2013 
        method: "GET",    
        async: false,    
        headers: { "Accept": "application/json;odata=verbose" },    
        success: function(data){    
            $scope.items = data.d.results;    // assigning the data from the list to the scope so I can use it
           // console.log(data.d.results);
        },    
        error: function(sender,args){    
            console.log(args.get_message());    
        }    
    });    
} 
</script>  

Next we need to get some data to work with.  In this example I am using a contacts list.  I used some of the code from this article to get it working but I had to tweak it to work with SharePoint 2010.

Ok so now that we have the items from the list we need to display them on the page, for this I built a simple table and added some code to allow for sorts and filters. I have included comments in the code to help it make sense. This article explains in more detail how the sort and filter works.

<div ng-app="spApp" ng-controller="contactsController" >
 //the app name and controller name here should match what you defined in the js code

        <input type="text" class="form-control" placeholder="Search" ng-model="searchContact" id="rosterSrchBx">  //search box angular uses the value entered in this box to filter the table


<table class="rosterTbl">
    
<thead>

<tr>
         
<td>
          <a href="#" ng-click="sortType = 'FullName'; sortReverse = !sortReverse"> //sort order code
            Name 
            <span ng-show="sortType == 'FullName' && !sortReverse" class="fa fa-caret-down"><img src="/_layouts/images/ARWDOWN.GIF"/></span>
            <span ng-show="sortType == 'FullName' && sortReverse" class="fa fa-caret-up"><img src="/_layouts/images/ARWUp.GIF"/></span>
          </a>
        </td>


<td>
          Phone Number
        </td>


<td>
          Cubicle
        </td>


<td>
          Email
        </td>

     </tr>

  </thead>


<tbody>    
    
<tr ng-repeat="item in items | orderBy:sortType:sortReverse | filter:searchContact" > //this is basically a repeater that spits out all the items in the list        
        
<td class="ms-vb">
           {{ item.FullName }} // this is how you display a column from the list, you have to use the internal name of the column
        </td>


<td class="ms-vb">
                   <img src="/_layouts/images/gbwcawpt.gif" align="absmiddle"/> 
                   {{ item.Phone }}
             </td>


<td class="ms-vb">
                   {{ item.Cubicle }}
             </td>


<td class="ms-vb"> 
                  <a href="mailto:{{ item.Email }}">
                   {{ item.UFOUOEmail }}
                  </a>
             </td>

            </tr>

       </tbody>

    </table>

</div>

To make it look a bit better I also added some CSS

.rosterTbl {
   padding:7px;
}
.rosterTbl td {
   padding:9px;
}
.rosterTbl thead td{
    background-color:#bfe8ff; 
    border:1px solid #90c6e5;
}
.rosterTbl tbody tr:hover {
   background-color:#edf8ff;
}
.rosterTbl tbody td {
   border-bottom:1px solid #eee;
}
#rosterSrchBx{
   padding:7px; 
   padding-left:25px; 
   font-size:1.7em; 
   margin:5px 0px; 
   background:url('/_layouts/images/magnify.gif') no-repeat 3px; 
   border:1px solid #ccc; 
}