Динамический HTML-контент не генерируется с кодом vanillaJS

Question

При выборе различных значений (с помощью мыши) в раскрывающемся списке динамически генерируются различные элементы ввода HTML (кнопки, поля ввода и т. Д.). Но когда я выбираю различные значения с помощью

document.getElementsByTagName('select')[2].selectedIndex = 5;

эти элементы ввода HTML (кнопки, поля ввода и т. Д.) НЕ генерируются.

Сайт находится в angular1.x

Answer 1

Изменения VanillaJS не запускают цикл $ digest AngularJS, поэтому AngularJS не знает об измененном значении selectedIndex.

Чтобы запустить цикл, добавьте $scope.$apply();, например:

document.getElementsByTagName('select')[2].selectedIndex = 5;
$scope.$apply();

Как говорится, вы на самом деле не следуете хорошим практикам AngularJS. Чтобы программно выбрать значение для selectedIndex, вы должны изменить значение модели раскрывающегося списка.

например. Вы бы выпали с ng-model на

<select ng-model="selectedIndex">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

И вы программно измените выбранное значение, изменив значение selectedIndex в вашем контроллере

app.controller("ctrl", function ($scope) {
    $scope.changeSelection = function (index) {
        $scope.selectedIndex = index;
    }
});