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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Гоша! Почему я не подумал об этом. Большое спасибо!

Mona 13.09.2018 18:46

@Mona рада помочь вам :-)

amrender singh 13.09.2018 18:47

Вы также можете сделать это: var x = $('#mySelect').options.length; $('#mySelect').html("Found " + x + " options in the list.");

Asad Haider 13.09.2018 21:38

Другие вопросы по теме