Multi Drop Down In AngularJS

In this blog, you will learn about multi dropdown in AngularJS.

Multi-level dropdowns

In this example, we have created a dropdown-submenu class for multi-level dropdowns.
Note, we have added jQuery to open the multi-level dropdown on click (see the script & code section below).

<div class="form-group"> <label class="col-sm-3 control-label">City</label>
    <div class="md-form-group" style="padding:0px">
        <div class="col-sm-3"></div>
        <ng-dropdown-multiselect="" options="ProfileModeldata" model="selected_items" selected-model="ProfileModel" extra-settings="example9settings" checkboxes="true" required></ng-dropdown-multiselect> <span id="multiselect-error" style="display: none; margin-top: 3px;color: #d9831f;position: absolute;visibility: visible;width: 100%;">Please select city.</span> </div>
</div>

I am trying to make a search bar, which should look, as shown below.

http://s22.postimg.org/ecaxmtj8x/search_bar.png

I am using Bootstrap 3. In the code given below, I have 3 buttons, where the "menu 2" button opens a dropdown menu. When I try to group the buttons into a btn-group, it separates from the joined search bar, which is not the one that I want.

Selected text format

Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select.

The supported values are given below.

 

• values- A comma delimited list of the selected values (default).
• count- If one item is selected, then the option value is shown. If more than one is selected, then the number of selected items are displayed. For e.g. 2 of 6 are selected.
• count > x- Here, x is the number of items selected when the display format changes from the values to count.
• static- Always show the select title (placeholder), regardless of selection.