multiselectable dropdown checkboxes using angular js

Question

I want to design a dropdownlist of checkboxes and make the checkboxes multi-selectable. I have used the below code,but I am unable to make multiple selections as the template refreshes each time I click on a checkbox,please suggest some ideas?

{   <ul class="status-select" class="status-select" ng-if="$index == selectedFilterIndex">
     <li ng-repeat="DataValue in filter.Data.Value">
        <input type="checkbox" ng-click="OnDropDownSelectionChanged(filter,DataValue)">
                        {{DataValue.displayText}}
     </li>
     </ul> 
}

Check this link dotansimha.github.io/angularjs-dropdown-multiselect/# — Abhi
– Abhi, Commented Apr 18, 2016 at 12:04
hi,but they are using some "bower" library in there code,i want to implement in angular only.. — Bonyjose
– Bonyjose, Commented Apr 18, 2016 at 12:07
@Bonyjose you don't need bower, there is an option to download .zip as well. — T J
– T J, Commented Apr 18, 2016 at 12:08
@ShekharSwami Please don't make edits that you are not sure about. It is not required and not valid — T J
– T J, Commented Apr 18, 2016 at 12:14

Community · Accepted Answer · 2020-06-20 09:12:55Z

18

You can use directive like angularjs-dropdown-multiselect, which you can find very easily on internet

Here are some example:

angularjs-dropdown-multiselect - Fiddle
multiselectDropdown - Fiddle
Another example of angularjs-dropdown-multiselect - Fiddle

Code Snippet:

var myApp = angular.module('exampleApp', ['angularjs-dropdown-multiselect']);

myApp.controller('appController', ['$scope',
  function($scope) {

    $scope.example13model = [];
    $scope.example13data = [{
      id: 1,
      label: "David"
    }, {
      id: 2,
      label: "Jhon"
    }, {
      id: 3,
      label: "Lisa"
    }, {
      id: 4,
      label: "Nicole"
    }, {
      id: 5,
      label: "Danny"
    }];

    $scope.example13settings = {
      smartButtonMaxItems: 3,
      smartButtonTextConverter: function(itemText, originalItem) {
        if (itemText === 'Jhon') {
          return 'Jhonny!';
        }

        return itemText;
      }
    };
  }
]);

div, h1, a {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<link href="https://bootswatch.com/slate/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/1.2.0/angularjs-dropdown-multiselect.min.js"></script>

<h2>
    Example of sytled angularjs-dropdown-multiselect  
</h2>

<a href="http://dotansimha.github.io/angularjs-dropdown-multiselect/#/">Source documentation</a>

<div ng-app="exampleApp" ng-controller="appController">

  <div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" extra-settings="example13settings"></div>

</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 18, 2016 at 13:11

rhitz

1,8922 gold badges22 silver badges27 bronze badges

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

2 Comments

Marek Halmo Over a year ago

Wow the number 3 is pretty awesome! Remember not to use external scripts in your real project. Somebody might inject some crazy stuff in to your external lib...(man in the middle attack)

N15 Over a year ago

Hi, I want to add the button click event for this can you tell me how to set it. I have create event but it is not hitting can you resolve me

Facundo Colombier · Accepted Answer · 2017-03-03 18:24:44Z

7

a simple workaround that I've found is using Angular Directives for Bootstrap using the auto-close="outsideClick" and the code should be like this:

<div class="dropdown" uib-dropdown auto-close="outsideClick" on-toggle="toggled(open)">
  <a class="btn btn-primary" uib-dropdown-toggle>Toggle</a>
  <ul class="dropdown-menu status-select" class="status-select" ng-if="$index == selectedFilterIndex" uib-dropdown-menu>
    <li ng-repeat="DataValue in filter.Data.Value">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-click="OnDropDownSelectionChanged(filter,DataValue)">
                      {{DataValue.displayText}}
        </label>
      </div>
    </li>
  </ul>
</div>

answered Mar 3, 2017 at 18:24

Facundo Colombier

3,6912 gold badges40 silver badges44 bronze badges

Comments

Ujjwal Pathak · Accepted Answer · 2018-05-04 11:04:04Z

3

You could go for Angular Material Design Library

Select with Option Groups

answered May 4, 2018 at 11:04

Ujjwal Pathak

68612 silver badges22 bronze badges

Collectives™ on Stack Overflow

multiselectable dropdown checkboxes using angular js

3 Answers 3

angularjs-dropdown-multiselect - Fiddle

multiselectDropdown - Fiddle

Another example of angularjs-dropdown-multiselect - Fiddle

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

angularjs-dropdown-multiselect - Fiddle

multiselectDropdown - Fiddle

Another example of angularjs-dropdown-multiselect - Fiddle

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related