vanillaJS 代码不会生成动态 HTML 内容

【问题标题】：Dynamic HTML content is not generated with vanillaJS codevanillaJS 代码不会生成动态 HTML 内容
【发布时间】：2018-06-23 10:10:23
【问题描述】：

在下拉列表中选择不同的值（通过使用鼠标）时，会动态生成不同的 HTML 输入元素（按钮、输入字段等）。但是，当我使用

选择不同的值时

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

不会生成那些 HTML 输入元素（按钮、输入字段等）。

网站在 angular1.x 中

【问题讨论】：

请添加相关代码
请添加代码...以便我们为您提供帮助:-)
我们需要所有相关代码...您能否添加负责生成 HTML 元素的代码，因为那是不起作用的部分
这是一个预建网站，我正在上面运行我的脚本，所以无法提供生成动态 HTML 元素的代码。
看起来你在 AngularJS 之外操作 AngularJS 元素，这是行不通的。您可能应该更新一个 ng-model，而不是直接更新元素的 selectedIndex。

【解决方案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;
    }
});

【讨论】：