当使用 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>

JavaScript

selectElement.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&nbsp;=&nbsp;Array.from(Array(10).keys());&nbsp;//&nbsp;Create&nbsp;scope&nbsp;array&nbsp;variable&nbsp;of&nbsp;whatever&nbsp;your&nbsp;list&nbsp;is那么你的 HTML 可能看起来像这样，可能不需要data-bp-placeholder：<select&nbsp;data-ng-model="count.amount"&nbsp;data-ng-options="amount&nbsp;for&nbsp;amount&nbsp;in&nbsp;count.amounts"> </select>

Answer 2

该ng-model指令仅在用户选择值时更新范围模型。value当 JavaScript 修改元素的属性时，它不会更新作用域模型<select>。<select data-ng-model="count.amount">&nbsp; &nbsp; <option value="0">0</option>&nbsp; &nbsp; <option value="1">1</option>&nbsp; &nbsp; <option value="2">2</option>&nbsp; &nbsp; <option value="3">3</option>&nbsp; &nbsp; <option value="4">4</option>&nbsp; &nbsp; <option value="5">5</option>&nbsp; &nbsp; <option value="6">6</option>&nbsp; &nbsp; <option value="7">7</option>&nbsp; &nbsp; <option value="8">8</option>&nbsp; &nbsp; <option value="9">9</option></select>要从 JavaScript 更新作用域模型：$scope.count.amount = "5";请务必使用字符串而不是数字。