使用輸入更新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