AngularJS - set default multi select drop down value from controller

Question

I am using AngularJS multi select drop down code from the following source: MultiSelectDropDown

I am using the same drop down twice in the same html page. I want to display the default selected drop down name of first multi select drop down as "Projects" and the second as "Environments".

The code in the multiselect.js file is using a directive and scope.header is set to "Select" as default and i want to change the default name "Select" to "Projects" and "Environments" in my html page.

I need your help to update it either using multiselect syntax in html page or from the controller to pass the scope.header value.

Michael Warner · Accepted Answer · 2021-06-30 14:28:01Z

1

Overview

The string value 'Select' is hardcoded into the directive. You will need to modify the code to make it dynamic.

Code

Here how I changed it.

https://plnkr.co/edit/J4CBblcfdDcrvE6K?preview

Index.html

I added the header attribute with the text I wanted it to show.

Lines 17-24

  <multiselect class="input-xlarge" multiple="true"
        ng-model="selectedCar"
        header="Cars"
        options="c.name for c in cars"
        change="selected()" ></multiselect>
        <div class="well well-small">
            {{selectedCar}}
        </div>

multiselect.js

I made the scope.header set to the attribute and default to 'Select' if nothing is given.

Line 45

scope.header = attrs.header || 'Select';

Line 119

if (!modelCtrl.$modelValue || !modelCtrl.$modelValue.length) return scope.header = attrs.header || 'Select';

answered Jun 30, 2021 at 14:28

Michael Warner

4,3673 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kalyan Over a year ago

Brilliant coding. It works as expected. I have a problem with the css where class "icon-ok" and "icon-remove" in multiselect.tmpl.html file is not working. The check marks don't show up in the UI. The "checkAll" and "UncheckAll" button work as expected but the tick marks disappeared. Could you please help me in fixing the problem.

Kalyan Over a year ago

I have downloaded the entire project.zip file, extracted and copied to htdocs directory in apache web server. The offline copy is not showing the tick marks but its working in the plunker link.

Kalyan Over a year ago

Sure, i can create a new question. Thanks for the help.

Collectives™ on Stack Overflow

AngularJS - set default multi select drop down value from controller

1 Answer 1

Overview

Code

Index.html

Lines 17-24

multiselect.js

Line 45

Line 119

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Overview

Code

Index.html

Lines 17-24

multiselect.js

Line 45

Line 119

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related