Advertisement
In this article we can learn how to do Filtering & Sorting in SharePoint List with Angular JS & Rest API
In a page added the script editor and place the below code.
Get data from SharePointOnline list using Rest API & AngularJS
how to get the current item id for newly created item in SharePoint
<style>how to get the current item id for newly created item in SharePoint
th {
background-color: blue;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
var myAngApp = angular.module('SharePointAngApp', []);
myAngApp.controller('spCustomerController', function ($scope, $http) {
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
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> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
<br /><br />
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" class="span10">
<div>
Sort by:
<select ng-model="sortExpression">
<option value="Title">Title</option>
<option value="Employee">Employee</option>
<option value="Company">Company</option>
</select>
</div>
<br />
Search By Any:
<input type="text" ng-model="search.$" />
<br />
<br />
<table class="table table-condensed table-hover">
<tr>
<th>Title</th>
<th>Employee</th>
<th>Company</th>
</tr>
<tr ng-repeat="customer in customers | orderBy:mySortFunction | filter:search">
<td>{{customer.Title}}</td>
<td>{{customer.Employee}}</td>
<td>{{customer.Company}}</td>
</tr>
</table>
</div>
</div>
Thanks for the solution. When I click the search text box it refreshes. Please do you have any solution To this
ReplyDeleteBest Selection of Dashiki Shirts and Pants.We are retail and wholesale of dashiki shirts. dashiki skirt
ReplyDelete