无法使用vanillaJS代码生成动态HTML内容

Question

虽然在下拉菜单中选择不同的值（使用鼠标），但动态生成了不同的HTML输入元素（按钮，输入字段等）。但是，当我使用

选择不同的值时

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

未生成这些HTML输入元素（按钮，输入字段等）。

该网站位于angular1.x

Answer 1

VanillaJS更改不会触发AngularJS的$ digest周期，因此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;
    }
});