ng-select默认为不工作

Question

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

我的问题是它不工作和选择总是开始时的空白。

这里是我的代码：

<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> 

Answer 1

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

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

从here

了那么我建议这样写它。

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>

Answer 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>