SharePoint Angular Js :- Add items to SharePoint List using Angular js Example

By: Unknown on 00:20

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 src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>   
<script>   
    function EmpCtrl($scope) {   
   
        $scope.emp = { firstName: "", lastName: "", location: "" };    
        $scope.addEmpInfo = function ($event) {   
            var x = $scope.emp;   
            $event.preventDefault();   
   
            var clientContext = new SP.ClientContext.get_current();   
            var web = clientContext.get_web();   
            var list = web.get_lists().getByTitle('Emp');                 
            var listItemInfo = new SP.ListItemCreationInformation();              
            var listItem = list.addItem(listItemInfo);                
            listItem.set_item('Title', 'Mr');   
            listItem.set_item('FirstName', x.firstName);   
            listItem.set_item('LastName', x.lastName);   
            listItem.set_item('Location', x.location);    
            listItem.update();      
            clientContext.executeQueryAsync(   
                Function.createDelegate(this, onQuerySucceeded),   
                Function.createDelegate(this, onQueryFailed)   
            );   
   
        };   
   
        onQuerySucceeded = function () {   
            alert('Item Added Successfully');   
        }   
   
        onQueryFailed = function (sender, args) {   
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());   
        }   
    }   
</script>   
   
   
<h1>Add item to sharepoint list using Angular Js</h1>   
<br />   
<div ng-app="">   
    <div ng-controller="EmpCtrl">   

 <table>
 <tr>
 <td>
    <strong>First Name</strong> 
 </td>
 <td>
     <input type="text" ng-model="emp.firstName" />
 </td>
 </tr>
 
  <tr>
 <td>
     <strong>Last Name</strong> 
 </td>
 <td>
      <input type="text" ng-model="emp.lastName" />
 </td>
 </tr>
 
  <tr>
 <td>
     <strong>Location</strong>
 </td>
 <td>
     <input type="text" ng-model="emp.location" />
 </td>
 </tr>
 <tr>
 <td>
       <input type="submit" value="Save" ng-click="addEmpInfo($event)" />
 </td>
 </tr>
 </table>    
          
    </div>   
</div>  

output:-