在ng选项中添加动态ID到选项

Question

当我在select中使用ng-options循环列表并生成我的下拉列表时，是否可以将动态属性id添加到option？它工作，如果我使用ng-repeat循环，因为我可以将attribut id直接放在option标签中，并用$index递增。这也可能与ng-options？这里是我的代码：

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.selectedOption1; 
 
    $scope.selectedOption2; 
 

 
    $scope.myList = [{ 
 
    text: "1" 
 
    }, { 
 
    text: "2" 
 
    }, { 
 
    text: "3" 
 
    }, { 
 
    text: "4" 
 
    }, { 
 
    text: "5" 
 
    }, ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    <!--BUILD DROPDOWN WITH NG-OPTIONS LOOP--> 
 
    <select ng-model="selectedOption" ng-options="option as option.text for option in myList"></select> 
 

 
    <!--BUILD DROPDOWN AND SET ATTRIBUT ID WITH NG-REPEAT LOOP--> 
 
    <select ng-model="selectedOption2"> 
 
    <option id="option_{{$index}}" ng-repeat="option in myList">{{option.text}}</option> 
 
    </select> 
 
</div>

两个select的截图（红色边框的ID用）：

任何想法？谢谢。

Answer 1

可以使用track by选项：

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by obj.value"> 

但是，你必须修改你的对象一点点：

$scope.myList = [{ 
    text: "1", 
    value: "option_1" 
}, { 
    text: "2", 
    value: "option_2" 
}, { 
    text: "3", 
    value: "option_3" 
}, { 
    text: "4", 
    value: "option_4" 
}, { 
    text: "5", 
    value: "option_5" 
}, ]; 

这应该做诀窍。

编辑The plunker to test it

EDIT 2对于那些谁想要一个快速的答案，你也可以这样做：

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by option + obj.text"> 

而且在js文件中加入：

$scope.option = 'option_'; 
$scope.myList = [{ 
    text: "1" 
}, { 
    text: "2" 
}, { 
    text: "3" 
}, { 
    text: "4" 
}, { 
    text: "5" 
}, ]; 

Answer 2

请看下面的答案。

Angular将总是呈现从0开始的index的值。不要担心这一点。由于它将有内部参考，并会相应地更新模态。

我已在下面放置了一个span以查看所选项目的value。

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.selectedOption1; 
 
    $scope.selectedOption2; 
 

 
    $scope.myList = [{ 
 
    text: "1" 
 
    }, { 
 
    text: "2" 
 
    }, { 
 
    text: "3" 
 
    }, { 
 
    text: "4" 
 
    }, { 
 
    text: "5" 
 
    }, ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    <!--BUILD DROPDOWN WITH NG-OPTIONS LOOP--> 
 
    <select ng-model="selectedOption" ng-options="('option_' + (myList.indexOf(option) + 1)) as option.text for option in myList"></select> 
 
    <br/><br/> 
 
    Selected: <span><b>{{selectedOption}}</b></span> 
 

 
</div>

Answer 3

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.selectedOption1; 
 
    $scope.selectedOption2; 
 

 
    $scope.myList = [{ 
 
    text: "1" 
 
    }, { 
 
    text: "2" 
 
    }, { 
 
    text: "3" 
 
    }, { 
 
    text: "4" 
 
    }, { 
 
    text: "5" 
 
    }, ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController"> 
 
    
 
<select ng-model="selectedOption2"> 
 
<option ng-repeat="d in myList track by $index" ng-value="'Option_'+($index+1)"> 
 
    {{d.text}} 
 
</option> 
 
    
 
</select> 
 
    {{selectedOption2}} 
 
</div>