Question

当我在Roslyn中使用id来循环列表并生成下拉列表时，是否可以向option添加动态归因ng-options？如果我使用select循环，它会起作用，因为我可以将attribut ng-repeat直接放在id标记中，并使用option增加它。 $index这也可以吗？这是我的代码：

＆＃13;

ng-options

＆＃13;

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.selectedOption1;
  $scope.selectedOption2;

  $scope.myList = [{
    text: "1"
  }, {
    text: "2"
  }, {
    text: "3"
  }, {
    text: "4"
  }, {
    text: "5"
  }, ];
});

＆＃13;

两个<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="selectedOption" ng-options="option as option.text for option in myList"></select>  <select ng-model="selectedOption2"> <option id="option_{{$index}}" ng-repeat="option in myList">{{option.text}}</option> </select> </div>的屏幕截图（红色边框是id＆＃39; s）：

有什么想法吗？感谢。

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

编辑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将始终从index开始将值呈现为0。别担心这个。因为它将有一个内部参考，并将相应地更新模态。

我在下方放置了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>

在ng-options中为选项添加动态ID

3 个答案: