vyshnavi vyshnavi - 3 months ago 15
Javascript Question

How to do CRUD operation update in angular js?

Hii i am new to angular js ,right now i am working on the crud operation in angular js , i dont know how to do update the data in angularjs which is consuming rest api calls. could you pls help me out ?

my view :

<div ng-repeat="phone in phones">
<p>{{ phone.sequenceNumber}}. {{ phone.phoneNumber }} ({{ phone.phoneType }}<span ng-if="phone.isPrimary"> primary</span>)</p>
<button ng-click="updatePhone()" ng-model="phone.phoneNumber" class="btn btn-small btn-primary">update</button>
</div>
</div>
</form>


my controller :

"use strict"

ContactApp.controller("StudentController", [
'$scope',
'$http',

'$state',
'$sce',
'UiString',
'Settings',
'EmergencyContact',
'MissingPersonContact',
'Address',
'Phone',

function($scope, $http,$state, $sce, UiString, Settings, EmergencyContact, MissingPersonContact, Address, Phone
) {

EmergencyContact.getContacts($scope.uid).then(function(contacts) {
$scope.emergencyContacts = contacts;
});

MissingPersonContact.getContacts($scope.uid).then(function(contacts) {
$scope.missingPersonContacts = contacts;
});

Address.getLocalAddress($scope.uid).then(function(address) {
$scope.localAddress = address;
});

Phone.getPhones($scope.uid).then(function(phone1) {
$scope.phones = phone1;
});



$scope.newPhoneNumber = '';

$scope.AddPhone = function() {
console.log("scope.newPhoneNumber",$scope.newPhoneNumber);

var newPhone = Phone.addPhone($scope.newPhoneNumber);

Phone.savePhone($scope.uid, newPhone).then(
function(response) {
$scope.phones.push(newPhone);
return console.log("question", response);
},
function(err) {
return console.log("There was an error "
+ err);
});

};

$scope.updatePhone = function() {


Phone.savePhone1($scope.uid, newPhone).then(
function(response) {
$scope.phones.push(newPhone);
return console.log("question", response);
},
function(err) {
return console.log("There was an error "
+ err);
});

};



}]);


my service :

'use strict';

angular.module('ContactApp')
.service('Phone', ['$q', '$http', 'Settings', function($q, $http, Settings) {

this.getPhones = function(id) {
var deferred = $q.defer();

if (id) {
$http.get(Settings.getSetting('wsRootUrl') +
'/person/phone/v1/' + id + '?token=' + Settings.getToken()).
success(function(response) {
deferred.resolve(response.data);
}).error(function(data, status) {
deferred.reject(status);
});
} else {
deferred.resolve({});
}

return deferred.promise;
};

this.addPhone = function(phoneNumber) {
var model =
{
"pidm": null,
"phoneType": "CELL",
"activityDate": null,
"isPrimary": null,
"phoneNumber": phoneNumber,
"sequenceNumber": null,
"status": null
};

return model;
}

this.savePhone = function(userId, phone) {
var deferred = $q.defer();
console.log(phone);
$http.post( Settings.getSetting('wsRootUrl') +
'/person/phone/v1/' + userId + '?token=' + Settings.getToken()
, [ phone ]).
success(function(response) {
deferred.resolve(response.data);
}).error(function(data, status) {
deferred.reject(status);
});

return deferred.promise;
};

this.updatePhone = function(phoneNumber1) {
var model =
{
"pidm": 123456,
"phoneType": "CELL",
"activityDate": null,
"isPrimary": null,
"phoneNumber": phoneNumber1,
"sequenceNumber": null,
"status": null
};

return model;
}
this.savePhone1 = function(userId, phone1) {
var deferred = $q.defer();
console.log(phone1);
$http.put( Settings.getSetting('wsRootUrl') +
'/person/phone/v1/' + userId + '?token=' + Settings.getToken()
, [ phone1 ]).
success(function(response) {
deferred.resolve(response.data);
}).error(function(data, status) {
deferred.reject(status);
});

return deferred.promise;
};

}]);

Answer

~~~EDIT~~~~

Okay from what I gather this is what you want:

In HTML inside of ng-repeat:

<input type="text" ng-model="phone.phoneNumber" />

// at this point when the user types their new phone number in the "phone" object has already been updated (via two-way data binding). Then if you want to save to database you can send to your service via the controller method $scope.updatePhone with the button.

<button ng-click="updatePhone(phone)">Update</button>

Then in the controller:

$scope.updatePhone = function (phone) {
    console.log("this is the updated phone: ",phone);
    console.log("this is the updated phones array: ",$scope.phones);
    // you should see that the phone number has been updated in scope.

    Phone.updatePhone(phone); 

    // this service call should be a post to the server, not a return object as the object has already been updated.

}

Hope this helps