似乎無法爲選擇選項設置默認選項;使用Angular

Question

我做了一些研究，但我只是不明白髮生了什麼。當頁面加載時，它有一個空白的<option>被選爲默認值。

當我最初點擊dropdownbox和菜單彈出下來..我得到的選項：

1. BLANK
2. 用戶
3. 主持人
4. 聯繫

然後當我選擇一些東西..只有

1. 用戶
2. 主持人

3. 管理員可供選擇

   用戶 主持人 聯繫

JS

$scope.formData = { 
    role: 'Select Role...', 
    userName: '', 
    password: '', 
    confirmPassword: '', 
    clientId: '', 
    clientName: 'Select Client...', 
    clientShowId: '', 
    clientShowName: 'Select Show...' 
}; 

//Role DropDown Click 
$scope.roleSelect = function (role) { 
    $scope.formData.role = '--- Select Role---' 
    $scope.formData.role = role; 

    //reset other dropdowns 
    $scope.formData.clientName = '---Select Client...'; 
    $scope.formData.clientShowName = 'Select Show...'; 
}; 

VIEW

<select class="form-control" ng-model="formData.role" ng-change="roleSelect(formData.role)" ng-init="formData.role = '--- Please Select---'">      
    <option value="User">User</option> 
    <option value="Moderator">Moderator</option> 
    <option value="Admin">Admin</option> 
</select> 

Answer 1

添加默認選項的方式：ng-init="formData.role = '--- Please Select---'"是不是做的方式。

它應該是一個空值的選項。

加載列表時，你會得到一個空值，因爲在模型中，$scope.formData.role等於'Select Role...'這個值不匹配列表中的任何值。

有了：

$scope.formData = { 
    role: '', 
    // ... 
} 

和：

<select class="form-control" ng-model="formData.role"> 
    <option value="">--- Please Select---</option> 
    <option value="User">User</option> 
    <option value="Moderator">Moderator</option> 
    <option value="Admin">Admin</option> 
</select> 

的formData.role初始值後，該值相匹配 '---請選擇---'

見fiddle

Answer 2

你需要把這個標記之間的觀點： 請嘗試設置爲「defaultVal」的角色，然後把，在

<option value="'defaultVal'">--- Please Select---</option> 

基本上 - 你需要匹配初始角色設置的值屬性選項標籤。

Answer 3

僅當ng模型中的值與選項中的某個元素匹配時，帶有select的ng模型纔會顯示默認選項。

，所以你需要使用像這樣，

<select class="form-control" ng-model="formData.role" ng-init="formData.role = '--- Please Select---'" ng-change="roleSelect(formData.role)">      
    <option>--- Please Select---</option> 
    <option value="User">User</option> 
    <option value="Moderator">Moderator</option> 
    <option value="Admin">Admin</option> 
    </select> 

plunker鏈接相同。

Answer 4

作爲替代上述的答案，如果你有興趣使用ngOptions，這裏是一個初始<option>元素能這樣做簡化方式...

.controller('ctrl', function($scope) { 
    $scope.options = ['User', 'Moderator', 'Admin']; 
}); 

---

<select ng-model="selected" ng-options="o as o for o in options"> 
    <option value="">--- Please Select---</option> 
</select> 

JSFiddle Link - 工作演示選擇元素