Monday, May 20, 2024
Homepage · angularjs
 Popular · Latest · Hot · Upcoming
129
rated 0 times [  135] [ 6]  / answers: 1 / hits: 59682  / 8 Years ago, mon, april 18, 2016, 12:00:00

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> 

}

More From » angularjs
 Answers
19

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


Here are some example:



  1. angularjs-dropdown-multiselect - Fiddle



  2. multiselectDropdown - Fiddle



  3. 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>




[#62503] Saturday, April 16, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bradleymoisesy
Add To Favorites
Follow
Total Points: 121
Total Questions: 105
Total Answers: 95
Location: Nepal
Member since Mon, Jan 4, 2021
3 Years ago
bradleymoisesy questions
Wed, Dec 22, 21, 00:00, 2 Years ago
Tue, Jun 1, 21, 00:00, 3 Years ago
Mon, Feb 1, 21, 00:00, 3 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
Thu, Jan 16, 20, 00:00, 4 Years ago
View All
;