当使用 ng-repeat o=constructed 选项时，从 select 框中获取所有选项

Question

我正在尝试从下拉列表中检索所有选项。我在手动构建时获得了所有选项，但在使用 ng-repeat 构建时我无法获得它们。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    
     var x = document.getElementById("mySelect").options.length;
    document.getElementById("demo").innerHTML = "Found " + x + " options in the list.";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p id="demo"></p>

<select id="mySelect" >
<option ng-repeat="x in names">{{x}}</option>
</select>


</div>

如您所见，运行找到的片段项目返回为“0”。

但是，如果您手动构建选项，则以下代码片段有效。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    
     var x = document.getElementById("mySelect").options.length;
    document.getElementById("demo").innerHTML = "Found " + x + " options in the list.";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p id="demo"></p>

<select id="mySelect" >
<option >Emil</option>
<option >Tobias</option>
<option >Linus</option>
</select>


</div>

想知道当 ng-repeat 与 select 一起使用时如何获取所有选项。谢谢！

Answer 1

发生这种情况是因为您的函数在呈现 DOM 之前执行。只需将您的代码包装在 $timeout 中，它就会按预期工作，因为 $timeout 只会在呈现 DOM 之后执行您的代码。

工作示例：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $timeout(function () {
        var x = document.getElementById("mySelect").options.length;
        document.getElementById("demo").innerHTML = "Found " + x + " options in the list.";
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p id="demo"></p>

<select id="mySelect" >
<option ng-repeat="x in names">{{x}}</option>
</select>


</div>

当使用 ng-repeat o=constructed 选项时，从 select 框中获取所有选项

Get all options from select box when options are o=constructed using ng-repeat

javascript

select

options

angularjs

angularjs-ng-repeat