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

Question

我正在尝试使用 javascript 和 AnglersJS 创建一个自定义下拉框，将数据绑定到选择。并非所有代码都在这里，但它应该工作的方式是用户单击一个使用未发布的代码创建的 div（充当选项选择），然后该 div 调用一个函数来更改select标签选择的索引和值，（不直接改变$scope中的模型）。data-ng-model 应该正在更新，但是该模型不会更新其值。我尝试过调用 $apply() 和 $digest() 但都不起作用。选择标签显示索引和值已更改，但模型未拾取它。注意：我的 Javascript 使用 data-bp-placeholder 创建自定义下拉列表。超文本标记语言<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>JavaScriptselectElement.selectedIndex = i;selectElement.value = optionList[i].value;“selectElement”是选择标签，“i”是索引，“optionsList”只是选项标签值的列表。在选择标签的值更改后，如何让 ng-model 更新其值。

Answer 1

您似乎正在直接操作 DOM，您应该避免这种情况，因为 AngularJs 可能无法识别它。要以正确的 AngularJs 方式进行操作，您需要更改两个地方：

• 将用户输入分配给模型而不是 DOM 元素，正如已经回答的那样

• 您的data-bp-placeholder处理程序似乎selectElement通过直接 DOM 操作动态添加选项值（appendChild我想是通过使用）。你也许应该尝试这个：

$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>

Answer 2

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

<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";

请务必使用字符串而不是数字。