在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>