javascript - 如何在Angular JS中进行CRUD操作更新？

Question

嗨，我是 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;
  };

}]);

Answer 1

~~~编辑~~~~

好吧，据我所知，这就是您想要的:

在 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.

}

希望这有帮助