AngularJS＆LT;选择＆GT; DOM标记 [英] AngularJS <select> DOM markup

问题描述

我用NG-选项和NG-模式设置所选的项目为什么对角DOM标记没有显示选择正确的值，但仍显示正确的价值模型时很好奇。

I'm curious when using ng-options and ng-model to set a selected item for the model why the Angular DOM markup isn't showing the correct value selected but is still displaying the correct value.

  $scope.myArray = [{ value: 'Yes' }, { value: 'No' }];

  $scope.cboModel.myArrayValSel = // Json pulled and value set from JS proxy call;

  <select ng-model="cboModel.myArrayValSel " ng-options="val.value as val.value for val in myArray " /> 

在DOM标记被渲染：

The DOM markup is rendering:

<option selected="selected" value="0" label="Yes">Yes</option>
<option value="1" label="No">No</option>

因此​​，如果该值回来为否因为它是在下拉列表中相应的在浏览器中显示此对象模型的属性，但我不明白为什么它不设置选择=选择的属性阵列中第二项。在

So, if the value comes back as 'No' for the object model property it is displaying this in the dropdown accordingly in the browser but I don't understand why it is not setting the selected="selected" attribute on the second item in the array. In this instance on

<option value="1" label="No">No</option>.  

如果我只是关心浏览器的输出，这将是更多的是好奇，但我的HTML转换为PDF。该PDF库渲染具有选择的属性设置这样还有什么是显示在浏览器，什么是在PDF输出之间存在明显脱节的价值。

If I was just concerned with the browser output this would be more of a curiosity but I am converting the HTML to a PDF. The PDF library is rendering the value that has the selected attribute set so there is an obvious disconnect between what is displayed in the browser and what is output in the PDF.

推荐答案

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

The selected attribute would only effect the initial page load (based on the value assigned to $scope.cboModel.myArrayValSel).

如果你想看到实际值＆LT;选项＆GT; 值属性，使用轨道由前pression，如：

If you want to see real values in the <option> value attributes, use a track by expression, eg

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

<大骨节病> Plunker

请注意，对于这个工作，势必 NG-模型必须从数组的实际值，而不是一个标量属性（如是或否）。

Note, for this to work, the bound ng-model must be an actual value from the array, not a scalar property (like 'Yes' or 'No').

您将在我的例子注意，我有

You'll note in my example that I have

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

这篇关于AngularJS＆LT;选择＆GT; DOM标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！