2013-04-18 3 views
4

나는 드롭 다운 목록 organizations가 $의 HTTP 요청을 사용하여 가득설정 기본 <select> 값은

<select ng-model="referral.organization" 
    ng-options="key as value for (key, value) in organizations"> 
</select> 

있습니다. 또한 드롭 다운에 저장된 값에 해당하는 정수 organization을 비롯한 여러 속성을 포함하는 referral 리소스가 있습니다. 현재 드롭 다운이 제대로 작동하고 새로운 값을 선택하면 내 referral 리소스가 문제없이 업데이트됩니다.

그러나 페이지로드시 서버에서 검색 한 referral.organization의 값을 표시하는 대신 (즉, 이전에 저장된 referral 양식을 열 때) 드롭 다운이 비어 있습니다. 페이지가 처음로드 될 때 리소스가 비어있을 가능성이 높지만 정보를 성공적으로 검색하면 드롭 다운을 어떻게 업데이트합니까?

편집 : {{ organizations[referral.organization] }} 페이지의 다른 위치에 배치하면 선택한 값이 성공적으로 표시되지만 태그에이 표현식을 표시하는 방법을 모르겠습니다.

두 번째 편집 : 문제는 ngOptions에서 사용 된 키와 ngModel에서 사용되는 변수 사이의 불일치로 보입니다. <select> 옵션은 referral 모델이 정수를 반환하는 동안 WebAPI (사전으로 시작 함에도 불구하고)에서 문자열로 반환되었습니다. referral.organization이 ngModel에 배치되었을 때 Angular는 2723을 "2723"등과 일치시키지 않았습니다.

여러 가지 시도를했지만 다음은 잘 작동하며 나에게 "가장 깨끗합니다". 은 $ 자원 GET에 대한 콜백에서 단순히과 같이 문자열에 필요한 변수를 변경 :

$scope.referral = $resource("some/resource").get(function (data) { 
       data.organization = String(data.organization); 
       ... 
      }); 

확실하지 않음이 각도 ("1000"1000 일치하지 않는) 또는 WebAPI (문제로 간주되는 경우 Dictionary<int,String>{ "key":"value" }으로 serialize)이 기능은 작동하며 <select> 태그는 여전히 referral 리소스에 바인딩됩니다. 방금 $scope.referral.organization을 설정할 수 있습니다 그것은 마술 일 것이다 간단한 유형의

+0

옵션이 비동기인지 또는 옵션이 객체인지에 대한 자세한 내용은이 질문 (및 답변)이 있습니까? –

답변

0

다른 답변은 대개 "그냥 작동합니다"라는 점에서 정확합니다. 이 문제는 궁극적으로 키 (정수)가 $scope.organizations에 저장되어 있고 키가 $http 응답에 저장되어있어 JSON에 저장되어 문자열로 인해 일치하지 않았습니다. Angular가 문자열을 정수와 일치시키지 않았습니다. 원래 질문에 대한 편집에서 언급했듯이 당시 해결책은 $http 응답 데이터를 문자열로 전송하는 것이 었습니다. Angular.js의 현재 버전이 여전히 이러한 방식으로 작동하는지 확신 할 수 없습니다.

3

:

http://jsfiddle.net/qBJK9/

<div ng-app ng-controller="MyCtrl"> 
    <select ng-model="referral.organization" ng-options="c for c in organizations"> 
    </select> 
</div> 

-

function MyCtrl($scope) { 
    $scope.organizations = ['a', 'b', 'c', 'd', 'e']; 
    $scope.referral = { 
     organization: 'c' 
    }; 
} 

당신이 객체를 사용하는 경우, 그것은 이후 난이도가 도착 Angular는 새로운 객체가 사실상 동일하다는 것을 충분히 똑똑하게 보지 않습니다.

function MyCtrl($scope) { 
    $scope.organizations = [{name:'a'}, {name:'b'}, {name:'c'}, {name:'d'}, {name:'e'}]; 
    $scope.referral = { 
     organization: $scope.organizations[2] 
    }; 
    $scope.loadReferral = function() { 
     $scope.referral = { 
      other: 'parts', 
      of: 'referral', 
      organization: {name:'b'} 
     }; 

     // look up the correct value 
     angular.forEach($scope.organizations, function(value, key) { 
      if ($scope.organizations[key].name === value.name) { 
       $scope.referral.organization = $scope.organizations[key]; 
       return false; 
      } 
     }); 

    }; 
} 
-

http://jsfiddle.net/qBJK9/2/

<div ng-app ng-controller="MyCtrl"> 
    <select ng-model="referral.organization" ng-options="c.name for c in organizations"></select> 
    {{referral}} 
    <button ng-click="loadReferral()">load referral</button> 
</div> 

: 어떤 각도 해킹이 아니라면, 내가 앞으로 볼 수있는 유일한 방법은이 서버에서로드되는 후 $scope.referral.organization를 업데이트하고 같은 $scope.organizations에서 값에 할당하는 것입니다

+0

'referral'은 내 WebApi에 대한 GET 요청을 사용하여 검색됩니다 (예 :'api/referrals/{id}'). 기존의 추천 양식에는 이미'organization' 변수가 있으며 실제로'organizations [referral.organization]'이 작동합니다. 그러나이 값을