角1.3 - ng-options内のオプションタグにIdsを追加する

Question

私は角を使用しています1.3.8。 ngOptionsのオプションとして配列を使用した選択リストがあり、構文には基本のtrack by式が含まれています。

私はng-optionsは、オプションタグを作成しているときに、現在のcolorのdescriptionから現在<option>要素にオプションの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、、オプション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>