AngularJS enables the creation of multiselectable dropdown checkboxes

Question

AngularJS enables the creation of multiselectable dropdown checkboxes

I am looking to create a dropdown list of checkboxes that allows for multiple selections. I have attempted to implement the code below, but I am facing an issue where the template refreshes each time a checkbox is clicked, preventing me from making multiple selections. Any suggestions on how to resolve this?

{   <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> 
}

javascript angularjs checkbox drop-down-menu

Answer 1

Answer №1

You have the option to utilize a directive like angularjs-dropdown-multiselect, which is readily available on the internet

Here are a few examples:

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

Snippet of Code:

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>
    An Example of Styled 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>

Answer 2

You have the option to utilize a directive like angularjs-dropdown-multiselect, which is readily available on the internet

Here are a few examples:

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

Snippet of Code:

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>
    An Example of Styled 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>

Answer 3

Answer №2

One effective solution I have discovered involves utilizing Angular Directives for Bootstrap with the auto-close="outsideClick" attribute. The implementation looks 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>

Answer 4

One effective solution I have discovered involves utilizing Angular Directives for Bootstrap with the auto-close="outsideClick" attribute. The implementation looks 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>

Answer 5

Answer №3

An excellent choice would be to utilize the Angular Material Design Library

Check out the Select with Option Groups demo

Answer 6

An excellent choice would be to utilize the Angular Material Design Library

Check out the Select with Option Groups demo

AngularJS enables the creation of multiselectable dropdown checkboxes

Answer №1

angularjs-dropdown-multiselect - Fiddle

multiselectDropdown - Fiddle

Another illustration of angularjs-dropdown-multiselect - Fiddle

Answer №2

Answer №3

Similar questions

Populating an HTML form using a Node.js server

Navigating from one page to another in AngularJS using $scope value parameter within data-ui-sref can be achieved by setting the value in the

Using AngularJS to connect a custom directive with a service

What is the best way to transfer information from a view to a controller in Laravel using AJAX?

Force the page to refresh if the user navigates back using the browser's back button

AngularJS $scope variable is not defined during page load

Access the OpenWeatherMap API to retrieve the weather forecast for a single time slot within a 5-day period

Choosing a subset of data within a JavaScript object with the help of jQuery/jHashtable

Using axios to retrieve data and then sending it to a localhost server using express

Combining the power of ExpressJS with a dynamic blend of ejs and React for an

Issue encountered when attempting to utilize multiple datasets with Twitter Typeahead/Bloodhound

Unable to display Bootstrap 5 modal

Utilizing Javascript in Spotfire for enhanced functionality

altering dimensions in three.js

The information is undefined, yet it is being recorded in the console

How can we use fetch to grab some data?

Creating a secure ZIP file with password protection using node.js

What alternative methods can be utilized to refresh my Angular page without resorting to using location.reload()?

Challenge with Vite, React, and MSW Integration

I am encountering an issue where the nested loop in Angular TypeScript is failing to return