SharePoint 2013: List operation using AngularJS Part 4

There are some changes in Add/Retrieve list item methods from previous posts. Please make a note about that. This post will explain you about how to update list item.

HTML:

<div> Total List</div>

<input type="button" ng-click="GetLists()" value="GetLists" />

<ul>

    <li ng-repeat="list in lists">

        <a ng-click="GetListItems(list.Title)">{{list.Title}}</a>

        </li>

    </ul>

    <ul>

    <li ng-repeat="listItem in listItems">

        <a ng-click="GetListItemsById(listItem.Id,listItem.Title)">{{listItem.Title}}</a>

    </li>

</ul>

List Name : <input ng-model="listName" />ID: <input ng-model="itemId" ng-readonly="true" /> Title : <input ng-model="iTitle" /><input type="button" ng-click="AddListItem()" value="AddListItem" /><input type="button" ng-click="UpdateListItem()" value="UpdateListItem" />

<div ng-hide="true">

    {{jsonData}}

</div>

<div ng-hide="true">

    {{listItemJSON}}

</div>

Controller: 

var listModule = angular.module('listModule', []);

listModule.controller('listController', ['$scope', 'ListService', function ($scope, ListService) {

    $scope.GetLists = function () {

        ListService.GetLists()

        .success(function (data) {

            $scope.jsonData = JSON.stringify(data);

            var results = data["d"]["results"];

            $scope.lists = results;

        })

        .error(function () {

            alert("error");

        });

    };

    $scope.GetListItems = function (listName) {

        $scope.listName = listName;

        ListService.GetListItems(listName)

        .success(function (data) {

            $scope.listItemJSON = JSON.stringify(data);

            var results = data["d"]["results"];

            $scope.listItems = results;

        })

        .error(function () {

            alert("error");

        });

    };

    $scope.GetListItemsById = function (listId,listTitle) {

        

        $scope.itemId = listId;

        $scope.iTitle = listTitle;

    };

    $scope.AddListItem = function () {

        ListService.AddItem($scope.listName, $scope.iTitle)

        .success(function () {

            $scope.$broadcast('RefillData');

         })

        .error(function () {

            alert("fail");

        });

    };

    $scope.UpdateListItem = function () {

        ListService.GetListItemsById($scope.listName, $scope.itemId)

        .success(function (data) {

            var result = data.d.results[0];

            ListService.UpdateListItem(result, $scope.listName, $scope.iTitle)

            .success(function () {

                $scope.$broadcast('RefillData');

            })

            .error(function () {

                alert("update failed");

            });

        })

        .error(function () {

            alert("error");

        });

    };

    $scope.$on('RefillData', function () {

        ListService.GetListItems($scope.listName)

        .success(function (data) {

            var results = data["d"]["results"];

            $scope.listItems = results;

        })

        .error(function () {

            alert("error while getting items");

        });

    });

}]);

Service: 

var listServiceModule = angular.module('listServiceModule', []);

listServiceModule.service('ListService', ['$http', function ($http) {

    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;

    this.GetLists = function () {

        var config = {

                headers: {

                    "ACCEPT": "application/json;odata=verbose"

                }

        };

        return $http.get(siteUrl + "/_api/web/lists", config);

    };

    this.GetListItems = function (listName) {

        var config = {

            headers: {

                "Accept": "application/json;odata=verbose"

            }

        };

        return $http.get(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items", config);

    };

    this.GetListItemsById = function (listName,itemId) {

        var config = {

            headers: {

                "Accept": "application/json;odata=verbose"

            }

        };

        return $http.get(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Id eq " + itemId, config);

    };

    

    this.AddItem = function (listName, iTitle) {

        var item = JSON.stringify({ '__metadata': { 'type': 'SP.List' }, 'Title': iTitle });

        var config = {

            headers: {

                "Content-Type": "application/json;odata=verbose",

                "ACCEPT": "application/json;odata=verbose",

                "X-RequestDigest": $("#__REQUESTDIGEST").val()

            }

        };

        return $http.post(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items", item, config);

    };

    this.UpdateListItem = function (data, listName, iTitle) {

        var item = JSON.stringify({ '__metadata': { 'type': 'SP.List' }, 'Title': iTitle });

        var config = {

            contentType: "application/json;odata=verbose",

            headers: {

                "Accept": "application/json;odata=verbose",

                "Content-Type": "application/json;odata=verbose",

                "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                "X-HTTP-Method": "MERGE",

                "If-Match": data.__metadata.etag

            }

        };

        return $http.post(data.__metadata.uri, item, config);

    };

}]);