In this post, I’ll
show how to display SharePoint 2010 list data using REST and AngularJS.
Firstly
create a list e.g. EmployeeDetails as shown below and add few records
Add the Html form web part with below code
|
<!--Angular
JS file reference-->
<script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
<script type="text/javascript">
var siteURL = "siteURL";
var spApp = angular.module('listmodule', []);
//Service
spApp.service('EmployeeListService', ['$http',
'$q', function
($http, $q) {
//Get the
Employees
this.getEmployees
= function (listName) {
var
dfd = $q.defer();
var
completeUrl = siteURL + "_vti_bin/listdata.svc/"
+ listName + "?$select=";
completeUrl += 'Id,Title,Technology&$orderby=Id asc';
$.ajax({
url: completeUrl,
type: "GET",
headers: { "accept": "application/json;odata=verbose"
},
success: function
(data) {
dfd.resolve(data.d.results);
},
error: function
(xhr) {
dfd.reject('Error : (' + xhr.status + ') ' + xhr.statusText + '
Message: ' + xhr.responseJSON.error.message.value);
}
});
return
dfd.promise;
}
}]);
//Controller
spApp.controller('EmployeeDetailsController', function ($scope, EmployeeListService) {
EmployeeListService.getEmployees("EmployeeDetails").then(
function
(result) {
$scope.listitems = [];
angular.forEach(result, function (item) {
var
listitem = {
ID: item.Id,
Title: item.Title,
Technology:
item.Technology
}
$scope.listitems.push(listitem);
});
$scope.orderByField = 'ID';
$scope.reverseSort = false;
},
function
(reason) {
$scope.errMessage = reason;
});
});
</script>
<div ng-app="listmodule">
<div ng-controller="EmployeeDetailsController">
<div>
<table id="tblEmployeeDetailsList">
<thead>
<tr>
<th>
<a href="#" ng-click="orderByField='ID'; reverseSort =
!reverseSort">ID <span ng-show="orderByField == 'ID'">
<span ng-show="!reverseSort"></span></span></a>
</th>
<th>
<a href="#" ng-click="orderByField='Title';
reverseSort = !reverseSort">Employee Name
<span ng-show="orderByField
== 'Title'"><span ng-show="!reverseSort"></span></span>
</a>
</th>
<th>
<a href="#" ng-click="orderByField='Technology';
reverseSort = !reverseSort">Technology
<span ng-show="orderByField
== 'Technology'"><span ng-show="!reverseSort"></span>
</span></a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in
listitems | filter:query | orderBy:orderByField:reverseSort">
<td>
{{ item.ID
}}
</td>
<td>
{{
item.Title }}
</td>
<td>
{{ item.Technology
}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
|
Result :
