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 

.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
        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){    

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">

          <a href="#" ng-click="sortType = 'FullName'; sortReverse = !sortReverse"> //sort order code
            <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>

          Phone Number





<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 class="ms-vb">
                   <img src="/_layouts/images/gbwcawpt.gif" align="absmiddle"/> 
                   {{ item.Phone }}

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

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





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

.rosterTbl {
.rosterTbl td {
.rosterTbl thead td{
    border:1px solid #90c6e5;
.rosterTbl tbody tr:hover {
.rosterTbl tbody td {
   border-bottom:1px solid #eee;
   margin:5px 0px; 
   background:url('/_layouts/images/magnify.gif') no-repeat 3px; 
   border:1px solid #ccc; 


Dave is a SharePoint developer and graphic designer based in the DC area.

Leave a Reply

Your email address will not be published. Required fields are marked *