Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

How to refresh or reload the controller in AngularJS after adding the list items

$
0
0

Hi,

I am using AngularJS for displaying and Adding list Items, so there are 2 controllers one for adding and one for displaying list items

i want refresh the controller after adding new list items, below is the JS code

var spApp = angular
.module("spApp", [])
.controller("viewItemsController", function ($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items?$select=Title,FirstName,ID";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).then(function (data, status, headers, config) {
$scope.contacts = data.data.d.results;
}).catch(function (data, status, headers, config) {
});

})

.controller("addItemsController", function ($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts')/items";
var vm = $scope;
vm.addContact = function () {
return $http({
headers: { "Accept": "application/json; odata=verbose","Content-Type": "application/json; odata=verbose","X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
method: "POST",
url: url,
data: {	

    __metadata: {
               "type": "SP.Data.ContactsListItem"
             },
'Title': vm.lastName,
'FirstName': vm.firstName

}
})
.then(saveContact)
.catch(function (message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("Item Added Successfully");
return data.data.d;


}
}
})

below is the html code which i am using in content editor webpart

<h3>View Contacts</h3><hr /><div ng-app="spApp"><div ng-controller="viewItemsController"><div ng-repeat="contact in contacts">
{{contact.ID}}: {{contact.Title}}, {{contact.FirstName}}</br></div></div><hr /><h3>Add Contacts</h3><div ng-controller="addItemsController"><div class="Table"><div class="Row"><div class="Cell">
First Name :</div><div class="Cell"><input type="text" id="firstName" ng-model="firstName"/></div></div><div class="Row"><div class="Cell">
Last Name :</div><div class="Cell"><input type="text" id="lastName" ng-model="lastName"/></div></div><div class="Row"><div class="Cell"></div><div class="Cell"><input type="button" id="btnAddContact" value="Add Contact" ng-click="addContact()"/></div></div></div></div><hr />





sal



Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>