使用输入更新ng模型数据

Question

我是新手，遇到问题。

我想从数据库中获取承诺数据并通过输入显示它。

这是我的输入：

    // not editable
    <input type="text" ng-model="currentMedCenter.name"/>

这是我的带有“ currentMedCenter”模型的控制器：

    function AccountProfileController($scope, medicalCenterService, doctorService) {
        //get information from singleton service
        $scope.currentMedCenter = medicalCenterService.currentMedCenter;
    }

我通过$ http.get从数据库获取数据，该数据包装在单例服务中。

这是单例医疗中心服务：

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {};

    medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

    return medicalCenterService;
})

这是对服务器的查询：函数'getCurrentMedicalCenter（）'：

getCurrentMedicalCenter: function () {
      var deferred = $q.defer();

            $http.get('Api/MedicalCenter/GetCurrentMedicalCenter').success(function(data) {
                deferred.resolve(data);
            });

            return deferred.promise;
}

在服务器上查询后，我得到JSON对象，如下所示：

  {
    "id": 1,
    "name": "Medical center #1"
  }

该对象已成功存储在单例服务medicalCenterService.currentMedCenter中。 UI侧的输入中将显示医疗中心名称。

我想更新我的“ currentMedcenter”模型，但是当我尝试编辑输入中的值时，我无法对其进行任何更改。 我无法添加新符号或删除先前的符号。

我正在使用1.0.8角版本。

Answer 1

首先，将currentMedCenter重写为：

getCurrentMedicalCenter: function () {
   return $http.get('Api/MedicalCenter/GetCurrentMedicalCenter');
}

无需在这里创建新的承诺。

然后在您的工厂进行更改：

medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

成为 ：

MedicalCenterResource.getCurrentMedicalCenter().success(function(data) {
   medicalCenterService.currentMedCenter = data;
});

因此，您将currentMedCenter设置为承诺的值，而不是承诺本身。

编辑：

下一个问题是您将输入绑定到currentMedCenter。 首先，这只是一个空对象。 然后，当http服务返回变量currentMedCenter时，将其更改为指向新数据，同时输入仍然具有指向旧数据的指针的值，因此不会获取更新。

要解决此问题，您需要将一个不会更改的对象传递给控制器​​。 该对象应包含一个指向currentMedCenter的属性。 由于此对象未更改，因此控制器将获得对象属性确实发生更改的事实。

指针甚至可以用Java捕获您！

将工厂更改为：

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {currentMedCenter: {data: {}}};
    MedicalCenterResource.getCurrentMedicalCenter().then(function(d) {
        medicalCenterService.currentMedCenter.data = d;    
    });
    return medicalCenterService;
})

请注意，现在返回的对象是如何具有属性数据的，并且在promise解析时将设置此属性。

然后在绑定输入时：

<input type="text" ng-model="currentMedCenter.data.name"/>

看到这个jsFiddle