HTML side
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="/_layouts/15/angularjs/Apps.js"></script>
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkgray;
color: white;
height: 30px;
}
</style>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div ng-app="myApp" >
<div ng-controller="myCtrl">
<br />
<br />
<input id="getData" type="button" value="GetData" ng-click="ButtonClick()" />
<input id="txtSearch" type="text" placeholder="Search by FirstName" ng-model="searchText.Name"/>
<br />
<table border="1">
<tr>
<td>
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</td> <td>Id</td><td>Salutation</td> <td>FirstName</td> <td>LastName</td>
</tr>
<tr ng-repeat="x in showData | filter: searchText">
<td>
<input type="checkbox" ng-model="x.Selected" />
</td>
<td>{{x.ID | uppercase }}</td>
<td>{{x.Title | uppercase }}</td>
<td>{{x.Name | lowercase}}</td>
<td>{{x.Class | lowercase }}</td>
<td><input type="button" value="Edit" ng-click="GetItem(x.ID)" style="background-color:red;color:white" /> </td>
<td><input type="button" value="Delete" ng-click="Delete(x.ID)" style="background-color:red;color:white" /> </td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>Id:</td><td> <input id="txtUserId" type="text" ng-model="student.Id" /></td>
</tr>
<tr>
<td> Salutation: </td><td>
<select name="singleSelect" ng-model="student.salutation">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
</td>
</tr>
<tr>
<td> FirstName: </td><td><input id="txtName" type="text" ng-model="student.Name" /></td>
</tr>
<tr>
<td>LastName:</td><td> <input id="txtIsUsed" type="text" ng-model="student.Class" /></td>
</tr>
</table>
<br />
<input id="btnInsert" type="button" value="Insert" ng-click="InsertData()" />
<input id="btnUpdate" type="button" value="Update" ng-click="UpdateData()" />
<input id="btnDelete" type="button" value="Delete" ng-click="Delete('')" style="background-color:red;color:white" />
<input id="btnDeleteAll" type="button" value="DeleteAll" ng-click="removeAll()" style="background-color:red;color:white" />
</div>
</div>
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', readyFucntion);
function readyFucntion()
{
}
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope, $http)
{
$scope.ButtonClick = function ()
{
$scope.CommonMethod();
}
$scope.CommonMethod = function ()
{
$http({
url: "/_api/web/lists/GetByTitle('AngularJS')/items",
method: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) {
$scope.showData = data.d.results;
}).error(function (sender, args) {
console.log(args.get_message());
});
}
$scope.ClearAll=function()
{
$scope.student.Id = "";
$scope.student.Name = "";
$scope.student.Class = "";
}
$scope.GetItem = function (itemId) {
$http({
url:"/_api/web/lists/getbytitle('AngularJS')/items(" + itemId + ")",
method: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data)
{
$scope.student.Id=data.d.ID;
$scope.student.Name=data.d.Name;
$scope.student.Class=data.d.Class;
$scope.student.salutation = data.d.Title;
}).error(function (sender, args) {
console.log(args.get_message());
});
}
$scope.checkAll = function ()
{
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.showData, function (item) {
item.Selected = $scope.selectedAll;
});
}
$scope.removeAll = function ()
{
alert("Feature is comming soon !OOPS");
}
$scope.student = { Id: "",Name: "", Class: "" };
$scope.InsertData = function ()
{
var stu = $scope.student;
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItemInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(listItemInfo);
listItem.set_item('Title', stu.salutation);
listItem.set_item('Name', stu.Name);
listItem.set_item('Class', stu.Class);
listItem.update();
clientContext.executeQueryAsync($scope.onQuerySucceededInsert, Function.createDelegate(this, onQueryFailed));
}
$scope.UpdateData = function () {
var stu = $scope.student;
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(stu.Id);
listItem.set_item('Title', 'Mr');
listItem.set_item('Name', stu.Name);
listItem.set_item('Class', stu.Class);
listItem.update();
clientContext.executeQueryAsync($scope.onQuerySucceededUpdated, Function.createDelegate(this, onQueryFailed));
}
$scope.Delete = function (itemId)
{
var stu = $scope.student;
if (itemId.length == 0) {
itemId = stu.Id;
}
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(itemId);
listItem.deleteObject();
clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
}
$scope.DeleteAll = function (itemId) {
var stu = $scope.student;
if (itemId.length == 0) {
itemId = stu.Id;
}
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(itemId);
listItem.deleteObject();
clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
}
$scope.onQuerySucceededInsert = function () {
alert('Item Added Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
$scope.onQuerySucceededUpdated = function () {
alert('Item Updated Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
$scope.onQuerySucceededDeleted = function () {
alert('Item Deleted Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
});
onQueryFailed = function (sender, args)
{ alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="/_layouts/15/angularjs/Apps.js"></script>
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkgray;
color: white;
height: 30px;
}
</style>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div ng-app="myApp" >
<div ng-controller="myCtrl">
<br />
<br />
<input id="getData" type="button" value="GetData" ng-click="ButtonClick()" />
<input id="txtSearch" type="text" placeholder="Search by FirstName" ng-model="searchText.Name"/>
<br />
<table border="1">
<tr>
<td>
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</td> <td>Id</td><td>Salutation</td> <td>FirstName</td> <td>LastName</td>
</tr>
<tr ng-repeat="x in showData | filter: searchText">
<td>
<input type="checkbox" ng-model="x.Selected" />
</td>
<td>{{x.ID | uppercase }}</td>
<td>{{x.Title | uppercase }}</td>
<td>{{x.Name | lowercase}}</td>
<td>{{x.Class | lowercase }}</td>
<td><input type="button" value="Edit" ng-click="GetItem(x.ID)" style="background-color:red;color:white" /> </td>
<td><input type="button" value="Delete" ng-click="Delete(x.ID)" style="background-color:red;color:white" /> </td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>Id:</td><td> <input id="txtUserId" type="text" ng-model="student.Id" /></td>
</tr>
<tr>
<td> Salutation: </td><td>
<select name="singleSelect" ng-model="student.salutation">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
</td>
</tr>
<tr>
<td> FirstName: </td><td><input id="txtName" type="text" ng-model="student.Name" /></td>
</tr>
<tr>
<td>LastName:</td><td> <input id="txtIsUsed" type="text" ng-model="student.Class" /></td>
</tr>
</table>
<br />
<input id="btnInsert" type="button" value="Insert" ng-click="InsertData()" />
<input id="btnUpdate" type="button" value="Update" ng-click="UpdateData()" />
<input id="btnDelete" type="button" value="Delete" ng-click="Delete('')" style="background-color:red;color:white" />
<input id="btnDeleteAll" type="button" value="DeleteAll" ng-click="removeAll()" style="background-color:red;color:white" />
</div>
</div>
Add Code in JS file Apps.js
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', readyFucntion);
function readyFucntion()
{
}
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope, $http)
{
$scope.ButtonClick = function ()
{
$scope.CommonMethod();
}
$scope.CommonMethod = function ()
{
$http({
url: "/_api/web/lists/GetByTitle('AngularJS')/items",
method: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) {
$scope.showData = data.d.results;
}).error(function (sender, args) {
console.log(args.get_message());
});
}
$scope.ClearAll=function()
{
$scope.student.Id = "";
$scope.student.Name = "";
$scope.student.Class = "";
}
$scope.GetItem = function (itemId) {
$http({
url:"/_api/web/lists/getbytitle('AngularJS')/items(" + itemId + ")",
method: "GET",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data)
{
$scope.student.Id=data.d.ID;
$scope.student.Name=data.d.Name;
$scope.student.Class=data.d.Class;
$scope.student.salutation = data.d.Title;
}).error(function (sender, args) {
console.log(args.get_message());
});
}
$scope.checkAll = function ()
{
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.showData, function (item) {
item.Selected = $scope.selectedAll;
});
}
$scope.removeAll = function ()
{
alert("Feature is comming soon !OOPS");
}
$scope.student = { Id: "",Name: "", Class: "" };
$scope.InsertData = function ()
{
var stu = $scope.student;
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItemInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(listItemInfo);
listItem.set_item('Title', stu.salutation);
listItem.set_item('Name', stu.Name);
listItem.set_item('Class', stu.Class);
listItem.update();
clientContext.executeQueryAsync($scope.onQuerySucceededInsert, Function.createDelegate(this, onQueryFailed));
}
$scope.UpdateData = function () {
var stu = $scope.student;
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(stu.Id);
listItem.set_item('Title', 'Mr');
listItem.set_item('Name', stu.Name);
listItem.set_item('Class', stu.Class);
listItem.update();
clientContext.executeQueryAsync($scope.onQuerySucceededUpdated, Function.createDelegate(this, onQueryFailed));
}
$scope.Delete = function (itemId)
{
var stu = $scope.student;
if (itemId.length == 0) {
itemId = stu.Id;
}
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(itemId);
listItem.deleteObject();
clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
}
$scope.DeleteAll = function (itemId) {
var stu = $scope.student;
if (itemId.length == 0) {
itemId = stu.Id;
}
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('AngularJS');
var listItem = list.getItemById(itemId);
listItem.deleteObject();
clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
}
$scope.onQuerySucceededInsert = function () {
alert('Item Added Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
$scope.onQuerySucceededUpdated = function () {
alert('Item Updated Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
$scope.onQuerySucceededDeleted = function () {
alert('Item Deleted Successfully');
$scope.CommonMethod();
$scope.ClearAll();
}
});
onQueryFailed = function (sender, args)
{ alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }