선택 인덱스 설정

Question

그래서 일부 개체의 내부 값을 기준으로 선택 인덱스를 설정하려고합니다. 개체를 순환하면서 콘솔에서 colorID가 업데이트되고 올바르게 표시되는 것을 볼 수 있습니다. 선택 인덱스는 마지막으로 선택한 옵션에서 변경되지 않습니다. 내가 뭘 놓치고 있니? 미리 감사드립니다.

HTML :

<select 
     ng-model="colorModel" 
     ng-change="updateColor(colorModel.id)" 
     ng-options="i.label for i in colorOptions"> 
</select> 

컨트롤러 :

$scope.colorOptions = [ 
     {value: 'red', label: 'Red', id: 0}, 
     {value: 'green', label: 'Green', id: 1}, 
     {value: 'blue', label: 'Blue', id: 2}, 
     {value: 'yellow', label: 'Yellow', id: 3} 
    ]; 

//setting it here works just fine 
$scope.colorModel = $scope.colorOptions[2]; 


$scope.nextOption = function(){ 
     $scope.groupIndex++; 
     $scope.currentOption = userOptions[$scope.groupIndex]; 
     $scope.colorModel = $scope.colorOptions[$scope.currentOption.colorID]; 
     //I event tried this with no luck 
     $scope['colorModel'] = $scope.currentOption.colorID; 
} 

Answer 1

당신이 $scope.colorModel에 갖고 싶어하는 것은 당신이 select에 표시 할 것을 배열 $scope.colorOptions의 색상 개체입니다,하지만 것 같다 label이 맞습니까? 그런 다음, ng-options에 대한 올바른 구문은 다음과 같습니다

이처럼, 당신의 controller에 $filter 서비스를 주입해야합니다

app.controller("yourController", function($scope, $filter){ 
    $scope.colorOptions = [ 
      {value: 'red', label: 'Red', id: 0}, 
      {value: 'green', label: 'Green', id: 1}, 
      {value: 'blue', label: 'Blue', id: 2}, 
      {value: 'yellow', label: 'Yellow', id: 3} 
     ]; 

    //setting it here works just fine 
    $scope.colorModel = $scope.colorOptions[2]; 

    $scope.nextOption = function(){ 
      $scope.groupIndex++; 
      $scope.currentOption = userOptions[$scope.groupIndex]; 
      $scope.colorModel = $filter('filter')($scope.colorOptions, {id:$scope.currentOption.colorID})[0]; 
    } 
}); 

주의 사항 : app.controller("yourController", function($scope, $filter){...

컨트롤러에서

<select 
     ng-model="colorModel" 
     ng-change="updateColor(colorModel.id)" 
     ng-options="i as i.label for i in colorOptions"> 
</select> 

이렇게

Working Example