似乎无法为选择选项设置默认选项;使用Angular

我做了一些研究，但我只是不明白发生了什么。当页面加载时，它有一个空白的<option>被选为默认值。似乎无法为选择选项设置默认选项;使用Angular

当我最初点击dropdownbox和菜单弹出下来..我得到的选项：

BLANK
用户
主持人
联系

然后当我选择一些东西..只有

用户
主持人
管理员可供选择

用户主持人联系

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

来源

2015-10-15 user1189352

使用NG选项。该指令是专门针对该情况制定的。 https://docs.angularjs.org/api/ng/directive/ngOptions –

好让我试试 – user1189352

添加默认选项的方式：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

来源

2015-10-15 21:49:36

我想这很好，但没有工作，没有......一些关于NG-模型迫使空的第一项 – user1189352

啊这实际上是WHY的最佳答案。 TY – user1189352

不客气:)一旦你舒服，你可以看看'ngOptions'这是另一种方式去（如果你需要选择比字符串值以外的东西特别有用） –

你需要把这个标记之间的观点：请尝试设置为“defaultVal”的角色，然后把，在

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

基本上 - 你需要匹配初始角色设置的值属性选项标签。

来源

2015-10-15 21:50:38 itamar

其实我想这也而没有工作也不... 一些关于NG-模型中的第一项.. – user1189352

奏效，迫使一片空白！ ty – user1189352

没问题！不要忘记标记它解决:-) – itamar

仅当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链接相同。

来源

2015-10-15 21:54:28 MaheshKumar

啊工作！ – user1189352

欢迎。 ..。 :) – MaheshKumar

作为替代上述的答案，如果你有兴趣使用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 - 工作演示选择元素

来源

2015-10-15 21:57:34 scniro

确实工作ty – user1189352

似乎无法为选择选项设置默认选项;使用Angular

回答

相关问题