在AngularJS开发中，我们经常使用表单元素来收集和展示用户输入数据。但是，在使用<select>元素时，有时候会出现一个奇怪的问题：当通过ng-model更新选项时，<select>元素并不会自动更新。
问题描述
下面是一个例子，在这个例子中，我们需要通过选择一个城市来更新显示的天气：
------- ------------------------ ------- ----------------------- ------- --------------------------- ------- ---------------------------- ------- ----------------------------- ------- ---------------------------- --------- ------------------------------
使用上述代码时，我们发现selectedCity的值确实被正确地更新了，但是<select>元素并没有根据selectedCity的值做相应的更新。这个问题看起来很奇怪，因为我们已经将ng-model与<select>元素绑定了，而且selectedCity的值也被正确地更新了，为什么<select>元素还是没有更新呢？
原因分析
其实，这个问题的原因是由于<select>元素的工作原理所导致的。在HTML中，<select>元素实际上是一个由<option>元素组成的下拉列表。当我们通过修改ng-model的值来更新选项时，<select>元素并不能自动地将对应的<option>元素选中。这是因为，在AngularJS中，<select>元素在与ng-model绑定之后，会根据ng-model的值自动选中匹配的<option>元素，但是它并不会根据<option>元素的值自动更新ng-model。
解决办法
解决这个问题的方法有很多种，下面是一些常用的方法：
1. 使用ng-options
使用ng-options指令可以非常方便地解决这个问题。ng-options指令可以将一个数组或对象转换为可选项列表，并且会自动根据ng-model的值选中对应的选项。
------- ----------------------- ---------------- --- ---- -- -------- ------- ----------------------- --------- ------------------------------
在这个例子中，我们使用ng-options将cities数组转换为可选项列表，并将每个城市名字作为选项的显示文本和值。ng-model会自动根据selectedCity的值选中对应的选项。
2. 使用$scope.$apply()
如果你不想使用ng-options指令，也可以手动更新<select>元素的选中状态。在ng-model的值发生变化时，我们可以手动调用$scope.$apply()方法来通知AngularJS更新UI。
------- ----------------------- --------------------------- ------- ----------------------- ------- --------------------------- ------- ---------------------------- ------- ----------------------------- ------- ---------------------------- --------- ------------------------------
------------------- - ---------- - ---------------- --
在这个例子中，我们使用ng-change指令来监听<select>元素的变化事件，并在变化时调用$scope.$apply()方法来通知AngularJS更新UI。
3. 使用$timeout
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/25328