Angular 1.3 - 将Id添加到ng选项中的选项标记

我正在使用Angular 1.3.8。我有一个选择列表使用数组作为ngOptions的选项，语法包括一个基本的track by表达式。Angular 1.3 - 将Id添加到ng选项中的选项标记

我需要能够唯一值添加到选项的ID属性（从目前的color的description时ng-options正在创建选项标签当前<option>元素。有没有办法做到这一点呢？如果不，我可以使用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>

来源

2017-04-12 red

为什么你需要ID上''

@charlietfl QA测试人员要求：\ – red

一种选择是使用ngRepeat与信达X (key, value) in expression

(key, value) in expression其中key和value可以是任何用户定义的标识符，和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>

来源

2017-04-12 17:16:56

噢，整洁，我明白了。但现在''colorType“：”{\“code \”：\“CY \”，\“description \”：\“Cyan \”}“'不会将默认设置为'cyan'。 – red

发现了，我可以使用'ng-selected'指令。 – red

Angular 1.3 - 将Id添加到ng选项中的选项标记

回答

相关问题