Javascript 如何在angular js中更新CRUD操作?

Javascript 如何在angular js中更新CRUD操作?,javascript,angularjs,html,Javascript,Angularjs,Html,嗨,我是angularjs的新手,现在我正在angularjs中进行crud操作,我不知道如何更新angularjs中的数据,因为angularjs正在使用RESTAPI调用。你能帮我一下吗 我的看法是: <div ng-repeat="phone in phones"> <p>{{ phone.sequenceNumber}}. {{ phone.phoneNumber }} ({{ phone.phoneType }}<span ng-i

嗨,我是angularjs的新手,现在我正在angularjs中进行crud操作,我不知道如何更新angularjs中的数据,因为angularjs正在使用RESTAPI调用。你能帮我一下吗

我的看法是:

      <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';

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;
  };

}]);
~~~编辑~~~~

好的,据我所知,这就是你想要的:

在HTML中的ng内重复:

<input type="text" ng-model="phone.phoneNumber" />
希望这有助于编辑~~~~

好的,据我所知,这就是你想要的:

在HTML中的ng内重复:

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

希望这对您有所帮助

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


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


我希望用户能够在视图中编辑phonenumber字段,并能够使用该更新按钮更新字段。在服务中我需要改变什么?以及如何在点击html@justin herterhii justin时使该字段可编辑,因为您建议phoneNumber对象将进入控制器,但在服务中它显示未定义,您能否建议hwat i必须在service.js文件中更改HII justin感谢您花时间编辑您的答案,但我的困惑是,我必须在service.js文件中写入什么?@vyshnavi,这取决于您试图如何处理数据。当数据到达服务时,您将如何处理它?是否保存到数据库?是的,justin herter我希望在数据访问服务@justin herteri时将数据保存到数据库我希望用户能够在视图中编辑电话号码字段,并能够使用更新按钮更新字段。在服务中我需要改变什么?以及如何在点击html@justin herterhii justin时使该字段可编辑,因为您建议phoneNumber对象将进入控制器,但在服务中它显示未定义,您能否建议hwat i必须在service.js文件中更改HII justin感谢您花时间编辑您的答案,但我的困惑是,我必须在service.js文件中写入什么?@vyshnavi,这取决于您试图如何处理数据。当数据到达服务时,您将如何处理它?是否保存到数据库?是的,justin herter我希望在数据到达服务@justin herter时将数据保存到数据库确保API调用中的getPhone返回数组,否则push方法将导致错误。另外,请检查开发人员控制台,并将其添加到问题描述中,这将比阅读整个代码更清楚。找到我的答案,告诉我它是否对您有帮助。我的控制台错误显示ponNumber undefinedMake sure getPhone in API调用返回数组,否则push方法将导致错误。另外,请检查开发人员控制台,并将其添加到问题描述中,这将比阅读整个代码更清晰。找到我的答案,告诉我它是否对您有帮助。我的控制台错误是显示未定义的ponNumber
<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.

}