bootstrap-select selects a wrong option each time.

Question

I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.

Plunker is setup here:

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

(code is in dashboard.html and dashboard.js)

That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.

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

Paul Popiel · Answer 1 · 2015-06-24T04:23:19.590

0

You should use ng-options to populate the option elements of a select input.

Like so:

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

EDIT

Use the following:

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

where customFunc is a new custom validation function you create to check that the selected value is not "".

edited Jun 24 '15 at 04:23

answered Jun 24 '15 at 03:13

Paul Popiel

930
11
21

it worked but then validation class="validate[required]" has no effect. means it is calling the submit function even when the select is required. if i take out validation works but then i get the same behavior of wrong selection . – Raas Masood Jun 24 '15 at 03:22
Ok I did some digging: the problem is the following http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select – Paul Popiel Jun 24 '15 at 04:18
This empty option is then being processed by the bootstrap-dropdown directive as an actual option. Specifically it is present in the DOM at the time the bootstrap dropdown js is run and it reads it as an actual option. – Paul Popiel Jun 24 '15 at 04:20
i did that vm.CurrCustomer.Logic = vm.Logics[0].value; here is the plunker http://plnkr.co/edit/HPPlxx?p=preview its something wrong with the validation engine i guess. – Raas Masood Jun 24 '15 at 04:27
Yeah check my EDIT in the main post as to what I suggest doing. – Paul Popiel Jun 24 '15 at 04:32
this custom action should be created in validation engine's js ? – Raas Masood Jun 24 '15 at 04:36
You should never edit third party code in your solutions (for reasons such as if you were to then update that library then you would lose your own code). The custom function should be in one of your files. How to wire up the validation to a custom function of this sort is beyond my knowledge. I would recommend looking through the docs as I am sure it is quite commonly needed. – Paul Popiel Jun 24 '15 at 04:40

Carson Drake · Answer 2 · 2015-06-24T03:40:38.470

0

This should fix your problem. You need a blank state option. Also it helps to use ng-options rather than using ng-repeat in the option. Hope this solves your problem!

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

edited Jun 24 '15 at 03:40

answered Jun 24 '15 at 03:30

Carson Drake

171
1
8

it worked but then validation class="validate[required]" has no effect. means it is calling the submit function even when the select is required. if i take out validation works but then i get the same behavior of wrong selection . – Raas Masood Jun 24 '15 at 03:32
You can add `required` to ` – Carson Drake Jun 24 '15 at 03:43
Yes my form uses jquery validation engine and select is a bootstrap select. Both the directives actually initiates them. Check-validation initiates jquery validation engine and other one intimates bootstrap- select – Raas Masood Jun 24 '15 at 03:46
Yes I see both of those, I'm just curious whether it's actually necessary to use both/either of those (validation engine and select is a bootstrap select). It seems like both of their functions can be replicated with the AngularJS library. Specially: [FormController](https://docs.angularjs.org/api/ng/type/form.FormController) and [ModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) – Carson Drake Jun 24 '15 at 03:50
My SPA was made using a html5 template and that template uses these plugins and i am awake countless nights to deal with them in Angular. – Raas Masood Jun 24 '15 at 03:52
Apologize @RaasMasood I did not mean offense, I know how template integrated directives can be constraining. After going through your plunkr thoroughly though, I would strongly recommend switching to an angular based plugin such as [angular-formly](http://angular-formly.com/#/). Angular modules are much easier to deal with in a SPA than jQuery and Bootstrap plugins wrapped in an angular directive. It will save you a lot of headaches. – Carson Drake Jun 24 '15 at 04:48
1

I guess that's an excellent advice. Will definitely consider it – Raas Masood Jun 24 '15 at 04:50

bootstrap-select selects a wrong option each time.

2 Answers2

Linked