SharePoint Angular Js :- Get items from SharePoint List using Angular js Example

By: Unknown on 00:15

Share it Please

Tweet

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and  paste the below code

<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){  

var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr"); 
 
for(i = 0; i < rows.length; i++){          
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}      
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</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('Emp')/items?$select=FirstName,LastName,Location",   
            headers: { "Accept": "application/json;odata=verbose" }   
        }).success(function (data, status, headers, config) {   
            $scope.customers = data.d.results;   
        }).error(function (data, status, headers, config) {   
          
        });   
    });   
       
   
</script>   

<h1>SharePoint with Angular js Example </h1>   
   
<div ng-app="SharePointAngApp" class="row">   
    <div ng-controller="spCustomerController" class="span10">   
       
         <table class="altrowstable" id="alternatecolor">
            <tr>   
                <th>FirstName</th>   
                <th>LastName</th>   
                <th>Location</th>   
                  
           </tr>   
            <tr ng-repeat="customer in customers">   
               <td>{{customer.FirstName}}</td>   
                <td>{{customer.LastName}}</td>   
               <td>{{customer.Location}}</td>   
               </tr>   
        </table>   
    </div>   
</div>  

output:-