Angular JS Tests: 2016

Tuesday, March 22, 2016

Display SharePoint list data in HTML table using angular js

Hi folks,

This is my first hands-on practice for implementing Angular JS with SharePoint. Please check the code below.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<script>

console.log(GetSiteUrl());

var spApp=angular.module('spApp',[]);
spApp.controller('spListCtrl',function($scope, $http){
$http(
{
method: "GET",
url: GetSiteUrl()+"/_api/web/lists/getByTitle('SAP Batch Jobs')/items?$select=Job%5Fx0020%5FName,Title,Client%5Fx0020%5FNumber,Location",
headers: { "Accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config){
$scope.SAP = data.d.results;
}).error(function (data, status, headers, config){
});
});

function GetSiteUrl(){
var urlParts = document.location.href.split("/");
return urlParts[0] + "//" + urlParts[2] + "/" + urlParts[3] + "/" + urlParts[4];
}
</script>

<div ng-app="spApp">
<div ng-controller="spListCtrl">
<table width="100%" cellpadding="10" cellspacing="2">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Client Number</th>
<th>Location</th>
</thead>
<tbody>
<tr ng-repeat="s in SAP">
<td>{{s.Job_x0020_Name}}</td>
<td>{{s.Title}}</td>
<td>{{s.Client_x0020_Number}}</td>
<td>{{s.Location}}</td>
</tr>
</tbody>
</table>
</div>
</div>

OUTPUT:

Filter the SharePoint list data and display it in Table

Hi All,

I am learning Angular JS these days and trying to implement some good solutions. Below is the code to filter the SharePoint list data and display it in HTML table.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<script>

console.log(GetSiteUrl());

var spApp=angular.module('spApp',[]);
spApp.controller('spListCtrl',function($scope, $http){
$http(
{
method: "GET",
url: GetSiteUrl()+"/_api/web/lists/getByTitle('SAP Batch Jobs')/items?$select=Job%5Fx0020%5FName,Title,Client%5Fx0020%5FNumber,Location",
headers: { "Accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config){
$scope.SAP = data.d.results;
}).error(function (data, status, headers, config){
});
});

function GetSiteUrl(){
var urlParts = document.location.href.split("/");
return urlParts[0] + "//" + urlParts[2] + "/" + urlParts[3] + "/" + urlParts[4];
}
</script>

<div ng-app="spApp">
<div ng-controller="spListCtrl">

Search: </td>
<input type = "text" ng-model = "jobName"></td>

<table width="100%" cellpadding="10" cellspacing="2">
<thead>
<th>Job Name</th>
<th>Job Status</th>
<th>Client Number</th>
<th>Location</th>
</thead>
<tbody>
<tr ng-repeat="s in SAP | filter: jobName |orderBy:'s.Client_x0020_Number'">
<td>{{s.Job_x0020_Name}}</td>
<td>{{s.Title}}</td>
<td>{{s.Client_x0020_Number}}</td>
<td>{{s.Location}}</td>
</tr>
</tbody>
</table>
</div>
</div>

OUTPUT:

Preferred Links:

http://www.tutorialspoint.com/angularjs/angularjs_filters.htm

Thursday, March 17, 2016

Filters

Hi Folks,

We can use the below angular js code to filter the data from the SharePoint list. As it is written in normal html tags, we need to code according to SharePoint.

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>

<p>The list will only consists of names matching the filter.</p>

</body>
</html>