使用輸入更新ng模型數據

我想從DB獲取承諾數據並通過輸入顯示它。

這是我輸入：

// 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從數據庫數據，這些數據包在單服務。

這是單medicalCenterService：

.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.cur rentMedCenter。醫療中心名稱顯示在UI端的輸入中。

我想更新我的'currentMedcenter'模型，但是當我嘗試在輸入中編輯值時，我無法更改它中的任何內容。我無法添加新符號或刪除前一個。

我正在使用1.0.8角度版本。

來源

2013-12-17 Artyom Pranovich

呼叫'medicalCenterService.currentMedCenter'。只有這樣才能進行AJAX調用，然後才能使其工作 – Abilash

我在AccountProfileController中調用了medicalCenterService.currentMedCenter： $ scope.currentMedCenter = medicalCenterService.currentMedCenter; –

您還沒有調用它..您正在將'medicalCenterService.currentMedCenter'的引用存儲在'$ scope.currentMedCenter'中...因此，您必須在'edicalCenterService.currentMedCenter'後面使用'（）' – Abilash

首先，改寫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的屬性。由於該對象不會改變，控制器將會看到對象屬性確實發生改變的事實。

指針可以抓住你，甚至在Javascript！

改變出廠爲：

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

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

注意返回的對象現在怎麼樣有一個屬性數據，正是這種屬性時承諾解決時設置。

然後結合該輸入時：

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

看到這個jsFiddle

來源

2013-12-17 14:01:45

我如何從控制器的工廠獲得當前的醫療中心？當我寫：$ scope.currentMedCenter = medicalCenterService.currentMedCenter; - >我得到未定義的對象 –

看到更新，它可能是所有關於指針！ –

酷！感謝幫助：） –

使用輸入更新ng模型數據

回答

相關問題