javascript - Angular Select 添加未定义的选项

Question

我在我的 Controller 中定义了这个 tempScale 对象:

$scope.tempScale = {
    scaleType : [],
    deviations : [],
    intervals : 0
};

它连接到我的 html:

<select id="scales" ng-model="tempScale.scaleType" class="form-control">
    <option value="Manually Calculated" ng-selected="true">Manually Calculated</option>
    <option value="Automatically Calculated">Automatically Calculated</option>
</select>

我在 ng-selected=true 中添加，以便手动计算将是第一个和选定的选项(基本上是默认选项 1)，但是，当我运行该页面时，我的 HTML 看起来像:

<select id="scales" ng-model="tempScale.scaleType" class="form-control ng-valid ng-dirty ng-touched">
    <option value="? undefined:undefined ?"></option>
    <option value="Manually Calculated" ng-selected="true" selected="selected">Manually Calculated</option>
    <option value="Automatically Calculated">Automatically Calculated</option>
</select>

为什么那些 ng 类出现在加载时，这个未定义的选项值来自哪里？这不是一个循环，所以我很困惑。

Answer 1

你不需要ng-selected。将 Controller 中的模型设置为 $scope.tempScale.scaleType='Manually Calculated';。

One cannot set a default selected item when using ng-model directive with select element. The select element is bind to model field, which data is undefined. What value select should display? Yes, undefined. You try to pass data via markup, it is not an Angular way. Just keep your data in JS model, not in HTML markup.[Ref]

Plunker demo