0

我有一个使用选择的表单。我正在尝试设置一个我想禁用的默认值，因此下拉菜单将显示“--选择状态--”作为第一个选项，并将强制用户进行选择。

我的问题是它不起作用，并且选择总是以空白开始。

这是我的代码：

    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
      <option ng-disabled="$index === 1"  ng-selected="true">--Select State--</option>
      <option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
    </select>
4

2 回答 2

2

<option>使用默认值和检查这个ng-options：

 <select ng-model="contactEditCtrl.addressData.state" 
         ng-options="state.name as state.name for state in contactEditCtrl.states" >
      <option value="" ng-disabled="true">-- select state --</option>
</select>

Demo fiddle

它将被转换为：

<select ng-model="addressData.state" style="width: 50%;" 
        ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty">
    <option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option>
    <option value="0">CCCCC</option>
    <option value="1">QQQQQQ</option>
</select>
于 2017-08-28T14:38:42.677 回答
1

当传递给 ng-options 的一组选项中不存在 ng-model 引用的值时，将生成空选项。这样做是为了防止意外选择模型：AngularJS 可以看到初始模型未定义或不在选项集中，并且不想自行决定模型值。

简而言之：空选项意味着没有选择有效的模型（有效的意思是：从选项集中）。您需要选择一个有效的模型值来摆脱这个空选项。

取自这里

所以我建议这样写。

var app = angular.module('myApp', []);

// Register MyController object to this app
app.controller('MyController', function MyController($scope) {
    this.addressData = {state: "--Select State--"};
    this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'>
    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
      <option value="--Select State--">--Select State--</option>
      <option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
    </select>
</div>

于 2017-08-28T14:43:48.287 回答