Aspx Code :
<%-- _LocalBinding --%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server" __designer:Preview="MVcRam2" __designer:Values="<P N='Property' T='BaseName' /><P N='MaxLength' T='40' /><P N='InDesign' T='False' /><P N='ID' ID='1' T='ctl00' /><P N='Page' ID='2' /><P N='TemplateControl' R='2' /><P N='AppRelativeTemplateSourceDirectory' R='-1' />"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script src="../../SiteAssets/Scripts/angular.min.js"></script>
<script src="../../SiteAssets/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="Js/UserTest.js" type="text/javascript"></script>
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="CollaborationServer" content="SharePoint Team Web Site" />
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">
<SharePoint:DelegateControl runat="server"
ControlId="SmallSearchInputBox" __designer:Preview="<div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<SharePoint:ProjectProperty Property="Description" runat="server" __designer:Preview="" __designer:Values=""/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<style>
table, td, th {
border: 1px solid red;
}
th {
background-color: Gray;
color: white;
}
</style>
<div ng-app="SharePointAngApp" class="row">
<div ng-controller="spCustomerController" >
<div >
<br/> Search Employee:
<input type="text" ng-model="search.$" style="width:400px" ng-change="mysearch()"/>
<!-- OR-- <input ng-model="query" style="width:250px" type="text"/> ->>
<p>Number of Items: {{results.length}}</p>
<!-- angular Js Code-->
<br>
</br>
</div>
<table >
<tr>
<th>
<a href="" ng-click="order('Title')">Title</a>
</th>
<th>
<a href="" ng-click="order('Employee')">Employee</a>
</th>
<th>
<a href="" ng-click="order('Company')">Company</a>
</th>
<th>
<a href="" ng-click="order('ID')">ID</a>
</th>
<th>Action
</th>
</tr>
<tr ng-repeat="customer in customers |orderBy:predicate:reverse |filter:paginate|filter:search">
<td>{{customer.Title}}</td>
<td>{{customer.Employee}}</td>
<td>{{customer.Company}}</td>
<td>{{customer.ID}}</td>
<td><input type="button" id="Idedit" value="Edit" ng-readonly='!($index == eEditable)' data-ng-click="getByDataID(customer.Id)"/>
<input type="submit" id="Delete" value="Delete" data-ng-click="Delete(customer.Id)"/></td>
</tr>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="3" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
<br> </br>
<table style="margin-left:5px">
<!-- <tr style="visibility:hidden">
<td>Id:</td>
<td>
<input type="text" id="txtItemId" data-ng-model="customer.ID" disabled="TRUE"/>
</td>
</tr> -->
<tr >
<td>Title</td>
<td><input type="text" id="txttitle" data-ng-model="customer.Title" width="10px" />
</td>
</tr>
<tr><td>
Employee</td>
<td>
<input type="text" id="txtemployee" data-ng-model="customer.Employee" width="10px"/></td>
</tr>
<tr>
<td>Company</td>
<td><input type="text" id="txtcompany" data-ng-model="customer.Company" width="10px" />
<input type="text" id="txtItemId" data-ng-model="customer.ID" style="visibility:hidden"/>
</td>
</tr>
<tr><td>
<input type="submit" id="btnsave" value="Save" data-ng-click="Save()"/>
</td>
<td>
<input type="submit" value="Update" id="btnupdateval" data-ng-click="Update()"/>
<input type="reset" value="Clear" data-ng-click="ClearFields()"/>
</td></tr>
</table>
</div>
</div>
<br>
</br>
</asp:Content>
JS Code
// ANGular Js Are Used
var myAngApp = angular.module('SharePointAngApp', ['ui.bootstrap', 'ngResource']);
myAngApp.controller('spCustomerController', function ($scope, $http) {
// var url= _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('UserTest')/items?$select=Title,Employee,Company,ID";
//alert("Ram");
$( "#btnupdateval" ).prop( "disabled", true );
$( "#pageTitle" ).css( "display",'none');
$scope.eEditable= -1;
$http({
method: 'GET',
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('UserTest')/items?$select=Title,Employee,Company,ID",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.customers = data.d.results;
$scope.totalItems = $scope.customers.length;
$scope.numPerPage = 5;
$scope.currentPage = 1;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.customers.indexOf(value);
return (begin <= index && index < end);
};
// var a= $scope.customers;
}).error(function (data, status, headers, config) {
});
//$scope.customers = [];
$scope.getByDataID = function (customer) {
var customerId= customer;
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('UserTest')/getitembyid("+customerId+")/?$select=Title,Employee,Company,ID",
type: "GET",
headers:
{
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data){
$( "#btnupdateval" ).prop( "disabled", false );
$scope.customer=data.d;
$('#txtItemId').val(data.d.Id);
$('#txttitle').val(data.d.Title);
$('#txtcompany').val(data.d.Employee);
$('#txtemployee').val(data.d.Company);
$( "#btnsave" ).prop( "disabled", true );
},
error: function(err){
alert("Error while fetching list item: " + JSON.stringify(err));
}
});
};
$scope.Save = function () {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('UserTest')/items",
type: "POST",
data: JSON.stringify
({
'__metadata': {'type': 'SP.Data.UserTestListItem' },
"Title": $scope.customer.Title,
"Employee":$scope.customer.Employee,
"Company":$scope.customer.Company }),
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function(data){
alert("Item added successfully!");
},
error: function(err){
alert("Error while adding item: " + JSON.stringify(err));
}
});
};
$scope.Update = function () {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('UserTest')/items("+$scope.customer.ID+")",
type: "POST",
data: JSON.stringify({
'__metadata': {'type': 'SP.Data.UserTestListItem' },
"Title": $scope.customer.Title,
"Employee":$scope.customer.Employee,
"Company":$scope.customer.Company
}),
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
success: function(data){
alert("Item updated successfully!");
},
error: function(err){
alert("Error while updating item: " + JSON.stringify(err));
}
});
};
$scope.Delete= function (customer) {
var customerId=customer;
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('UserTest')/items("+customerId+")",
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"If-Match": "*"
},
success: function(data){
alert("Item deleted successfully!");
},
error: function(err){
alert("Error while deleting item: " + JSON.stringify(err));
}
});
};
$scope.ClearFields= function ()
{
$( "#btnsave" ).prop( "disabled", false );
$scope.customer="";
};
// Sorting For
$scope.predicate = 'name';
$scope.reverse = true;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.mysearch = function() {
alert('Ram');
};
///
});
// End Of Angular Js
No comments:
Post a Comment