입력이있는 모델링 데이터를 업데이트하십시오.

Question

저는 새 것이지요. 문제가 있습니다.

DB에서 약속 데이터를 얻어 입력으로 표시하고 싶습니다. 이것은 'currentMedCenter'모델 내 컨트롤러

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

입니다 :

이 내 입력

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

내가 싱글 서비스에 싸여 $ http.get하여 DB에서 데이터를 얻을.

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

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

      return deferred.promise; 
} 

서버에 쿼리 한 후, 나는 다음과 같이 JSON 개체를 얻을 : 기능 'getCurrentMedicalCenter() :

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

    var medicalCenterService = {}; 

    medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter(); 

    return medicalCenterService; 
}) 

이 서버에 대한 쿼리는 다음과 같습니다

이

은 싱글 medicalCenterService입니다

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

이 개체는 싱글 톤 서비스 medicalCenterService.cur에 성공적으로 저장되었습니다. rentMedCenter. 의료 센터 이름이 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를 가리키는 속성이 있어야합니다. 이 개체는 변경되지 않으므로 컨트롤러는 개체 속성이 변경된다는 사실을 인식합니다.

포인터가 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