CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-chosen
HP.
HP.

Reputation: 19896

Angular Chosen default selected not working

I am using https://github.com/localytics/angular-chosen to create select element with default item being selected:

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6" ng-model="myPick">
  <option value=""></option>
  <option value="AAA">AAAAAAAAAAAAAAAA</option>
  <option value="BBB" selected="selected">BBBBBBBBBBBBBBB</option>
</select>

I want BBBBBBBBBBBBBBB to be selected by default but it doesn't work:

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

Using selected="selected" and $scope.myPick = "BBB"; doesn't make it work either. Could you please help on why?

If I remove the model, it works just fine:

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6">
  <option value=""></option>
  <option value="AAA">AAAAAAAAAAAAAAAA</option>
  <option value="BBB" selected="selected">BBBBBBBBBBBBBBB</option>
</select>

UPDATE 1

Upvotes: 0

Views: 5723

Answers (2)

Phuong Nguyen
Phuong Nguyen

Reputation: 3080

Your plugin "chosen" changes the select markup, so it's no longer select element

<div class="chosen-container chosen-container-single form-control span6 ng-pristine ng-valid localytics-chosen chosen-container-single-nosearch" style="width: 835px;" title="">
    <a class="chosen-single chosen-default" tabindex="-1">
        <span>Select an Option</span>
        <div><b></b></div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off" readonly="">
        </div>
        <ul class="chosen-results">
            <li class="active-result" style="" data-option-array-index="2">AAAAAAAAAAAAAAAA</li> 
            <li class="active-result" style="" data-option-array-index="3">BBBBBBBBBBBBBBB</li>
        </ul>
    </div>
</div>

I guess you will need to create a custom directive if you want ng-model to work with your plugin (.e.g. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)

Upvotes: 0

Esteban Felix
Esteban Felix

Reputation: 1561

Instead of inserting the options through the markup, you can predefine the options like so:

$scope.options = {
  'AAA':'AAAAAAAAAAAAAAAA',
  'BBB':'BBBBBBBBBBBBBBB'

} ;
$scope.myPick = "BBBBBBBBBBBBBBB";

and in your view:

<select chosen="{inherit_select_classes:true}" disable-search="true" class="form-control span6" ng-options="v for (k,v) in options" ng-model="myPick">
</select>

You can see how it works here: http://plnkr.co/edit/aOV1agWFfJZaTU675wEF?p=preview

Upvotes: 1

Related Questions