将动态 id 添加到 ng-options 中的选项
Add dynamic id to option in ng-options
当我在 select
中使用 ng-options
循环我的列表并生成我的下拉列表时,是否可以将动态属性 id
添加到 option
?如果我使用 ng-repeat
循环,它会起作用,因为在那里我可以将属性 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):
有什么想法吗?谢谢。
请看下面的答案。
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>
您可以使用 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"
}, ];
这应该可以解决问题。
编辑 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"
}, ];
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>
当我在 select
中使用 ng-options
循环我的列表并生成我的下拉列表时,是否可以将动态属性 id
添加到 option
?如果我使用 ng-repeat
循环,它会起作用,因为在那里我可以将属性 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):
有什么想法吗?谢谢。
请看下面的答案。
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>
您可以使用 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"
}, ];
这应该可以解决问题。
编辑 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"
}, ];
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>