This article explains how to filter and sort in SharePoint List data using Angular JS /REST-API. I used the REST API to talk to SharePoint and get the data from the list. I am not going to discuss much about the REST services since many folks have already done great work on explaining REST API services.
In this article we just see that we have first created an Angular Controler with the name "spCustomerController." We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of the SharePoint list. $scope is a glue between a Controller and a View. It acts as execution context for expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}.we’ll be looking at a way tosort and filter our tabular data. This is a common feature that is always useful so let’s look at what we’ll be building and dive right into the code
Solution
We will implement on a Sample Application and try to get the data from the SharePoint list, bind the table and apply sort and filter to our tabular data.
Our application will allow us to:
In this article we just see that we have first created an Angular Controler with the name "spCustomerController." We have also injected $scope and $http service. The $http service will fetch the list data from the specific columns of the SharePoint list. $scope is a glue between a Controller and a View. It acts as execution context for expressions. Angular expressions are code snippets that are usually placed in bindings such as {{ expression }}.we’ll be looking at a way tosort and filter our tabular data. This is a common feature that is always useful so let’s look at what we’ll be building and dive right into the code
Solution
We will implement on a Sample Application and try to get the data from the SharePoint list, bind the table and apply sort and filter to our tabular data.
Our application will allow us to:
- Show a table of data (ng-repeat)
- Sort by ascending or descending columns (orderBy)
- Filter by using a search field (filter)
These are three common functions in any application and Angular lets us implement these features in a very simple way. Let’s set up our sample application’s HTML and Angular parts and then look at how we can sort and filter.
<%@ Register TagPrefix="WpNs0" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular JS</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
<script type="text/javascript" src="../SiteAssets/JS/Scripts/JQueryv1.10.3.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/Scripts/angular.min.js"></script>
<script type="text/javascript">
var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http) {
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('Country')/items?$select=Title,CountryCode,SortOrder,Created,Modified ",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.customers = data.d.results;
$scope.mySortFunction = function(
customer)
{ //Sorting Iteam
if (isNaN(customer[$scope.sortExpression]))
return customer[$scope.sortExpression];
return parseInt(customer[$scope.sortExpression]);
}
}).error(function (data, status, headers, config) {
});
});
</script>
<h1> Angular JS SharePoint 2013 REST API !!</h1>
</head>
<body>
<form id="form1" runat="server">
<ZoneTemplate></ZoneTemplate></form>
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">
<div style="background-color:fuchsia;border: thick;border-color:fuchsia;width:555px">
<div class="span10">
Sort by:
<select ng-model="sortExpression">
<option value="Title">Title</option>
<option value="Employee">CountryCode</option>
<option value="Company">SortOrder</option>
</select>
</div>
<br/> Search By Any:
<input type="text" ng-model="search.$" />
<br/>
<br/>
</div>
<table class="table table-condensed table-hover">
<tr>
<th>Title</th>
<th>CountryCode</th>
<th>SortOrder</th>
<th>Created</th>
<th>Modified</th>
</tr>
<tr ng-repeat="customer in customers | orderBy:mySortFunction | filter:search">
<td>{{customer.Title}}</td>
<td>{{customer.CountryCode}}</td>
<td>{{customer.SortOrder}}</td>
<td>{{customer.Created}}</td>
<td>{{customer.Modified}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
