CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeatbootstrap-multiselect
joy
joy

Reputation: 3707

Conflict in use of "selected" attribute in multiselect dropdown using bootstrap-multiselect and conflict with angularjs "selected" directive

I am using bootstra-multiselect along with angularjs in my project. During testing what i found is, the "selected" attribute name is getting conflict between these two. Following is my HTML markup for my multi select directive.

<select id="example-getting-started" multiple="multiple"  name="multiselect[]" data-dropdownmultiselect>    
    <option data-ng-repeat="option in options" value="{{getOptionId(option)}}" data-ng-attr-selected="{{isOptionSelected(option)}}" data-ng-bind-template="{{option.name}}"></option> 
</select>

What i found is, data-ng-attr-selected="{{isOptionSelected(option)}}" is not getting compiled by angularjs. Seems like angular js "ng-selected" directive is getting applied instead of my required normal attribute.

How can solve this? I don't want to change the code or either bootstra-multiselect or angularjs to avoid future maintability. Is there something in Angularjs to stop running its predefined "ng-selected" directive?

Following is plunker code to demo this problem Angularjs and conflict of directive name with other module

Upvotes: 1

Views: 1525

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

You could use ng-selected="expression" which will add selected attribute with selected value in the current select option, I don't understand why you are doing it using ng-attr while you can control that using ng-selected="isOptionSelected(option)"

Markup

<select id="example-getting-started" multiple="multiple"  name="multiselect[]" data-dropdownmultiselect>    
    <option data-ng-repeat="option in options" value="{{getOptionId(option)}}" 
    ng-selected="isOptionSelected(option)" 
    data-ng-bind-template="{{option.name}}"></option> 
</select>

Working Plunkr

Let me know if you want anything else on it, Thanks :)

Upvotes: 1

Related Questions