Angularjs select가 일치하는 모델을 선택 됨으로 표시하지 않습니다.

Question

select에서 선택한 ngModel에 문제가 있습니다. id와 name은 모두 일치하지만 작동하지 않습니다. selectedState를 참조하십시오. 모델을 옵션 배열 작업 내에서 실제 객체로 가리키는 것은 selelectedState2를 참조하십시오. 어떤 아이디어가 무슨

바이올린 ... 진행하지 : 각 개체가이 각도가 동일 함하는지 여부를 결정하는 데 사용하는 각도에 의해 제공 자신의 $hashKey의이 있기 때문에 http://jsfiddle.net/fedorsmirnoff/b49n4Ldp/2/

<select ng-model="selectedState" ng-options="state.name for state in stateOptions"></select> 

<select ng-model="selectedState2" ng-options="state.name for state in stateOptions"></select> 

function MainCtrl($scope) { 
$scope.stateOptions = [ 
    {id: 1, name: "Alaska"}, 
    {id: 2, name: "Montana"}, 
    {id: 3, name: "Nebraska"}, 
    {id: 4, name: "Texas"} 
    ] 

$scope.selectedState = {id: 2, name: "Montana"}; 

$scope.selectedState2 = $scope.stateOptions[1]; 

} 

Answer 1

이입니다. $scope.selectedState에 새 오브젝트 (다른 ​​$hashKey 포함)를 생성 중입니다. $scope.selectedState2에 설정하는 방법이 정확합니다.

또한 대신 state.id에 의해 각도 트랙을 만들 track by를 사용할 수있는 개체의 $hashKey :

당신이 $ scope.selectedState, 당신은 실제로 요소가 아닌 새로운 자바 스크립트 객체를 생성하는 설정

<select ng-model="selectedState" ng-options="state.name for state in stateOptions track by state.id"></select> 

Answer 2

$ scope.stateOptions 중 하나입니다. 따라서 select 요소는 $ scope.stateOptions에서 해당 요소를 선택하지 않습니다.

고유 한 attr 값으로 항목을 선택해야하는 경우 선택 식에서 '추적 기준'을 사용할 수 있습니다.

Answer 3

ng-options 문의 끝에 트랙 by state.id를 추가하십시오.

Answer 4

각도 팀 ngSelect here에 대한 문서에서이 문제를 언급 :

참고 : ngModel는 참조하지 값으로 비교합니다. 이것은 객체 배열에 바인딩 할 때 중요합니다. 이 jsfiddle의 예를 참조하십시오.

$scope.options = [ 
    { label: 'one', value: 1 }, 
    { label: 'two', value: 2 } 
    ]; 

    // Although this object has the same properties as the one in $scope.options, 
    // Angular considers them different because it compares based on reference 
    $scope.incorrectlySelected = { label: 'two', value: 2 }; 

    // Here we are referencing the same object, so Angular inits the select box correctly 
    $scope.correctlySelected = $scope.options[1]; 

Answer 5

당신이 모델의 고유 한 값으로 track by을 사용 후, 기존 목록에 대한 참조를 보유하지 않는 모델로 객체를 제공하는 경우 그래서 대신에 사용자 고유의 $$를 사용하는 hashKey, ng-options는 설정중인 ng-model을 추적하기 위해 트랙에서 제공하는 속성을 사용합니다.

ng-options="state.name for state in stateOptions track by state.id" 

Demo

뿐만 아니라 그것은 어떤 기준으로 설정 NG 모델에 유용하지만 그것뿐만 아니라 특히 목록이 갱신됩니다, 요소 성능 효과의 큰 거래를 가지고 제거 및 재 작성되지 않고 대신 각도가 기존 요소를 업데이트합니다.

여기에 very good example for this입니다.

Answer 6

저는 Angular가 동일한 속성을 가진 두 객체를 비교하는 대신 참조 검사를 사용한다고 생각합니다. $ scope.selectedState2는 다른 객체를 반환합니다. 나는 보통 초기화를 위해 배열에서 선택된 항목을 찾기 위해 understore를 사용한다.