Question

我有下面列出的代码可以正常工作，但是当我尝试将ng-model和相关的ng-change添加到select时，会添加一个空选项。我理解为什么，这是因为在init上，ng-model的selectedOption是空的。

我想要做的是设置一个默认值，这样当我可以使用ng-change将选项IsSelected值设置为true时，用户选择它。我只是不确定如何解决这个问题，当我使用静态生成的选择列表时，我没有遇到任何问题，但出于某种原因，我无法弄清楚这个动态生成列表。

感谢任何输入！

    <div ng-repeat="optionType in productDetailModel.OptionTypes">
         <select name="{{optionType.OptionTypeName}}">
            <option ng-repeat="option in optionType.Options"
             value="{{option.OptionValue}}">{{option.OptionValue}}
            </option>
         </select>
     </div>

这里的傻瓜我嘲笑我想到了我的想法：http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview

Answer 1

初始选项为空白，因为模型最初未定义。正如tymeJV所说，在你的.js中初始化你的范围将定义一个默认值，该值将在最初显示为。

$scope.modelName = $scope.optionType.Options[0];

使用ng-options代替ng-repeat可能会有所帮助。可能有益的一个原因是ng-options不会创建子范围（与ng-repeat不同）。这有助于简化与模型的链接，避免混淆。

<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options"> 
</select>

This article涵盖了ng-options的基础知识，并讨论了为什么使用它而不是ng-repeat。

希望这有帮助。

Answer 2

使用ng-options时使用select！

<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>

然后将ngModel设置为您想要选择的默认option：

$scope.someModel = $scope.optionType.Options[0]

Answer 3

选择元素的一个指令是 ng-init 但是在第一次渲染时调用了一次，但是如果您动态更改选项，那么它将不再调用。因此，您需要在新选项填充逻辑的低于范围内设置模型字段。

$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object

动态选择列表默认选定项 - Angular JS

3 个答案: