Получить все опции из поля выбора, когда опции построены с использованием ng-repeat - PullRequest
Новая
       11

Получить все опции из поля выбора, когда опции построены с использованием ng-repeat

0 голосов
/ 13 сентября 2018

Я пытаюсь получить все опции из выпадающего списка.Я получаю все опции, когда они создаются вручную, но не могу получить их, когда они создаются с использованием 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.Спасибо!

1 Ответ

0 голосов
/ 13 сентября 2018

Это происходит потому, что ваша функция выполняется до визуализации 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>
...