multiselectable dropdown checkboxes using angular js
56,294
Solution 1
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>
Solution 2
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>
Solution 3
You could go for Angular Material Design Library
Author by
Bonyjose
just a newbie into programming, currently working in .net practice.
Updated on May 05, 2020Comments
-
Bonyjose about 4 years
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> }
-
Marek Halmo almost 7 yearsWow 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 almost 6 yearsHi, 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