Question

Hii我是角度js的新手，现在我正在处理角度js中的crud操作，我不知道如何更新angularjs中正在消耗其余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>

我的控制员：

 "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

~~~ EDIT ~~~~

好的，我收集的内容是你想要的：

在ng-repeat内的HTML中：

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

//此时用户在“手机”对象中键入新手机号码时已经更新（通过双向数据绑定）。然后，如果要保存到数据库，可以通过控制器方法$ scope.updatePhone和按钮发送到您的服务。

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

然后在控制器中：

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

}

希望这有帮助

Answer 2

您可以在AngularJS中找到带有Web API的CRUD操作示例，以执行创建，读取，更新和删除功能。我希望对你有帮助。

CRUD Operation in AngularJS with Web API

如何在角度js中进行CRUD操作更新？

2 个答案: