bootstrap-select 每次都会选择错误的选项。

Question

我在 Angular 中使用 bootstrap select Bootstrap-select v1.7.2。当我从下拉列表中选择某个选项时，它会选择其他选项。

Plunker 在这里设置：

http://plnkr.co/edit/HPPlxx?p=preview

（代码在dashboard.html和dashboard.js中）

这就是我创建它的方式。 bootstrap-dropdown 是启动下拉菜单的指令。

  <form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
        <select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
           <option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
        </select>
        <button type="submit" class="btn btn-sm text-right">Save</button>
     </form>

Answer 1

这应该可以解决您的问题。您需要一个空白状态选项。它还有助于使用 ng-options 而不是在选项中使用 ng-repeat。希望这能解决您的问题！

<div ng-controller="dashboard as vm">
   <div class="block-area">
      <div class="row col-md-12 ">
         <h3 class="block-title">  {{vm.title}}</h3>
         <form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
            <select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
               <option value="">Pick One</option>
            </select>
            <button type="submit" class="btn btn-sm text-right">Save</button>
         </form>
      </div>
   </div>
</div>

Answer 2

您应该使用 ng-options 来填充选择输入的选项元素。

像这样：

<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
    <option value="">Select...</option>
</select>

---

编辑

使用以下内容：

<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
         <option style="display:none" value="">Select</option>
</select>

其中customFunc 是您创建的新自定义验证函数，用于检查所选值是否不是""。