각도 1.3 - ng 옵션 내의 옵션 태그에 ID를 추가하십시오.

Question

각도를 1.3.8으로 사용하고 있습니다. 배열에 ngOptions 옵션을 사용하는 선택 목록이 있고 구문에 기본 track by 표현이 포함되어 있습니다.

나는 ng-options가 옵션 태그를 만드는 현재 <option> 요소에 전류 color의 description에서 (옵션의 ID 속성에 고유 한 값을 추가 할 수 있어야합니다. 그렇게 할 수있는 방법이 있다면? 거기 나는 ng-repeat 사용할 수 있습니까? 내가 성공하지 ng-repeat을 시도하지.

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.colors = [{ 
 
    "code": "GR", 
 
    "description": "Green" 
 
    }, { 
 
    "code": "RE", 
 
    "description": "Red" 
 
    }, { 
 
    "code": "CY", 
 
    "description": "Cyan" 
 
    }, { 
 
    "code": "MG", 
 
    "description": "Magenta" 
 
    }, { 
 
    "code": "BL", 
 
    "description": "Blue" 
 
    }]; 
 

 
    // Preselect CYAN as default value 
 
    $scope.data = { 
 
    colorType: $scope.colors[2] 
 
    } 
 

 
});

<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script> 
 
<div ng-app="plunker"> 
 
    <div ng-controller="MainCtrl"> 
 
    <strong>ng-options: </strong><select name="color" id="colors" ng-model="data.colorType" ng-options="color as color.description for color in colors track by color.code"></select> 
 
<strong>ng-repeat: </strong><select name="color" id="colors" ng-model="data.colorType"> 
 
\t <option ng-repeat="color in colors" value="{{color}}">{{color.description}}</option> 
 
</select> 
 
    <pre>{{ data | json }}</pre> 
 
    </div> 
 
</div>

Answer 1

하나의 옵션은 synta와 ngRepeat을 사용하는 것입니다 X (key, value) in expression

key 및 value은 사용자 정의 될 수 (key, value) in expression 식별자 및 expression는 열거 컬렉션을주는 범위 식이다. 그 구문 키를 사용

는

(예컨대 index)을 첨가 할 수있다

<option ng-repeat="(index, color) in colors" value="{{color}}" id="option_{{index}}">{{color.description}}</option> 

가 아래 보여 참조. 옵션을 검사하면 id 속성 집합이 표시되어야합니다 (예 : option_0, option_1 등).

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.colors = [{ 
 
    "code": "GR", 
 
    "description": "Green" 
 
    }, { 
 
    "code": "RE", 
 
    "description": "Red" 
 
    }, { 
 
    "code": "CY", 
 
    "description": "Cyan" 
 
    }, { 
 
    "code": "MG", 
 
    "description": "Magenta" 
 
    }, { 
 
    "code": "BL", 
 
    "description": "Blue" 
 
    }]; 
 

 
    // Preselect CYAN as default value 
 
    $scope.data = { 
 
    colorType: $scope.colors[2] 
 
    } 
 

 
});

<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script> 
 
<div ng-app="plunker"> 
 
    <div ng-controller="MainCtrl">   
 
<strong>ng-repeat: </strong><select name="color" id="colors" ng-model="data.colorType"> 
 
\t <option ng-repeat="(index, color) in colors" value="{{color}}" id="option_{{index}}">{{color.description}}</option> 
 
</select> 
 
    <pre>{{ data | json }}</pre> 
 
    </div> 
 
</div>