嗨,我是 Angular JS 的新手,现在我正在 Angular JS 中进行增删改查操作,我不知道如何更新 AngularJS 中的数据,该数据正在消耗 REST API 调用。你能帮我一下吗?
我的观点:
<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>
我的 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);
});
};
}]);
我的服务:
'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;
};
}]);
最佳答案
~~~编辑~~~~
好吧,据我所知,这就是您想要的:
在 ng-repeat 内的 HTML 中:
<input type="text" ng-model="phone.phoneNumber" />
//此时,当用户在“phone”对象中键入新电话号码时,该对象已经更新(通过双向数据绑定(bind))。 然后,如果您想保存到数据库,您可以通过 Controller 方法 $scope.updatePhone 使用按钮发送到您的服务。
<button ng-click="updatePhone(phone)">Update</button>
然后在 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.
}
希望这有帮助
关于javascript - 如何在Angular JS中进行CRUD操作更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38273360/