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

Question

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

柱塞在此处设置：

http://plnkr.co/edit/HPPlxx?p=预览

（代码在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来填充选择输入的选项元素。

像这样：

<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是您创建的新的自定义验证功能，用于检查所选值是否不是"" 。

Answer 2

这应该可以解决您的问题。 您需要一个空白状态选项。 同样，它有助于使用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>