Question

我做了一些研究，但我不了解发生了什么。页面加载时...默认选中空白<option>。

当我最初点击下拉框并弹出菜单时......我得到了选项：

BLANK
用户
主持人
管理

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

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

用户主席管理员

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...';
};

查看

<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的初始值将与＆＃39; ---请选择---＆＃39;

的值匹配

参见 fiddle

Answer 2

您需要将它放在标签之间的视图中：尝试将您的角色设置为＆＃39; defaultVal＆＃39;然后把它放在

中

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

基本上 - 您需要将初始角色设置与Option标记中的value属性相匹配。

Answer 3

仅当ng-model中的值与选项中的一个元素匹配时，

ng-model with select才会显示默认选项。

所以你需要像这样使用它，

<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感兴趣，可以使用简化方式使用初始[dom-bind::_createEventHandler]: listener method `{{handleTap}}` not defined元素。

      <template is="dom-bind" id="app">
      <paper-dialog id="logon-dialog"
        modal
        entry-animation="scale-up-animation"
        exit-animation="fade-out-animation"
        opened
      >
        <h2>User Login</h2>
        <iron-a11y-keys keys="Enter" on-keys-pressed="{{doLogon}}"></iron-a11y-keys>
        <form id="dologon" is="iron-form" action="/serve/logon.php" method="POST" contentType="application/json">
          <paper-input label="User Name" ></paper-input>
          <paper-input label="password" type="password"></paper-input>
          <paper-checkbox>Edit Profile after Log On</paper-checkbox>
        </form>
        <div class="buttons">
          <paper-button raised on-tap="{{handleTap}}">Log On</paper-button>
        </div>
      </paper-dialog>


    <paper-header-panel class="flex">
      <paper-toolbar><div ident>PASv5</div><span class="flex"></span><iron-icon icon="menu:calendar"></iron-icon><iron-icon icon="search"></iron-icon><iron-icon icon="menu"></iron-icon><span>User Name</span></paper-toolbar>
      <div></div>
    </paper-header-panel>
  </template>
 <script>
    var app= document.querySelector("#app");
    app.handleTap = function(event) {
      this.$.logon-dialog.close();
    };
</script>

<option>

JSFiddle Link - 工作演示

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

4 个答案: