当 <select> 用 JavaScript 更改时，ng-model 不会更新答案

【问题标题】：ng-model wont update when <select> is changed with JavaScript当 <select> 用 JavaScript 更改时，ng-model 不会更新
【发布时间】：2020-06-18 17:38:10
【问题描述】：

我正在尝试使用 javascript 和anglersJS 制作一个自定义下拉框，以将数据绑定到选择。并非所有代码都在这里，但它应该工作的方式是用户单击div（它用作选项选择），它与未发布的代码创建，然后div调用一个函数来改变选择标签选择的索引和值，（不直接改变$scope中的模型）。 data-ng-model 应该会更新，但是模型不会更新其值。

我试过调用 $apply() 和 $digest() 都没有工作。选择标签显示索引和值发生了变化，但模型没有拾取它。

注意：我的 Javascript 使用 data-bp-placeholder 创建自定义下拉列表。

HTML

<div class="bp-select" data-bp-placeholder="Choose">
    <select data-ng-model="count.amount">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</div>

JavaScript

selectElement.selectedIndex = i;
selectElement.value = optionList[i].value;

'selectElement' 是选择标签，'i' 是索引，'optionsList' 只是选项标签值的列表。

如何让 ng-model 在选择标签的值更改后更新其值。

【问题讨论】：

ng-model 指令仅在用户选择值时更新范围模型。当 JavaScript 修改 <select> 元素的 value 属性时，它不会更新作用域模型。

标签： javascript html angularjs

【解决方案1】：

您似乎在直接操作 DOM，您应该避免这样做，因为 AngularJs 可能无法识别它。做正确的AngularJs方式，需要改两处：

将用户输入分配给模型而不是 DOM 元素，正如已经回答的那样
您的 data-bp-placeholder 处理程序似乎通过直接 DOM 操作（我想是使用 appendChild）动态地将选项值添加到 selectElement。你也许应该试试这个：

$scope.count.amounts = Array.from(Array(10).keys()); // Create scope array variable of whatever your list is

那么你的 HTML 可能看起来像这样，可能不需要data-bp-placeholder:

<select data-ng-model="count.amount" data-ng-options="amount for amount in count.amounts">
</select>

【讨论】：

【解决方案2】：

ng-model 指令仅在用户选择值时更新范围模型。当 JavaScript 修改 <select> 元素的 value 属性时，它不会更新作用域模型。

<select data-ng-model="count.amount">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

从 JavaScript 更新作用域模型：

$scope.count.amount = "5";

一定要使用字符串而不是数字。

【讨论】：