AngularJS <select> DOM标记

Question

我很好奇当使用ng-options和ng-model为模型设置一个选定的项目时，为什么Angular DOM标记没有显示选择的正确值，但仍然显示正确的值。   $ scope.myArray = [{value：'是'}，{值：'不'}];   $ scope.cboModel.myArrayValSel = // Json从JS代理调用中拉出并设置值;   ＆lt; select ng-model =“cboModel.myArrayValSel”ng-options =“val.value as val.value for val in myArray”/＆gt; DOM标记呈现： ＆lt; option selected =“selected”value =“0”label =“是”＆gt;是＆lt; / option＆gt; ＆lt; option value =“1”label =“No”＆gt; No＆lt; / option＆gt; 因此，如果对象模型属性的值返回为“否”，则它会在浏览器中的相应下拉列表中显示此值，但我不明白为什么它没有在第二个项目中设置selected =“selected”属性数组。在这个例子中 ＆lt; option value =“1”label =“No”＆gt; No＆lt; / option＆gt;。 如果我只关心浏览器输出，这将更多的是好奇心，但我将HTML转换为PDF。 PDF库正在呈现具有所选属性集的值，因此浏览器中显示的内容与PDF中输出的内容之间存在明显的脱节。

Answer 1

selected属性只会影响初始页面加载（基于分配给$scope.cboModel.myArrayValSel的值）。

如果您想在<option> value属性中查看实际值，请使用track by表达式，例如

ng-options="val.value for val in myArray track by val.value"

Plunker

注意，要使其正常工作，绑定的ng-model必须是数组中的实际值，而不是标量属性（如'Yes'或'No'）。

在我的例子中你会注意到我有

$scope.choice = $scope.myArray[0];