0

Very Simple AngularJS Dropdown displaying a list of values with multiselect checkboxes

I would like to make a dropdown with a list of values, where one can multiselect among these values with a checkbox on each value in the dropdown list. I want to be able to react to the event when one checks or unchecks the checkbox for one of the values I display in dropdown.

I would like the solution to be as simple as possible, so if it can be made without some custom directive, or third party library. I would prefer that.

So basically I just want to display a totally plain AngularJS drop down, with a check box for each value in the dropdown list. Something like just adding a checkbox to it and make it able to perform multiselect. The dropdown should also be scrollable. https://docs.angularjs.org/api/ng/directive/select

I have found some more complex solutions to give you an idea about what I want: enter code herehttps://codepen.io/elmahdim/pen/hlmri enter code herehttps://jsfiddle.net/michaeldeongreen/22et6sao/9/ But I find these solutions too complex and would like something really simple if possible.

Rune Hansen
  • 954
  • 3
  • 16
  • 36
  • 1
    Stackoverflow is not a free code writing service. Instead show us what you have done and describe the problems you are having so far. BTW ` – georgeawg Nov 24 '18 at 23:39
  • What I want needs to behave like a drop down, in the way of just rendering on top of the existing HTML when you click it. The
    • solution you describe sounds interesting to me. The only thing I need to get that solution to work for me, is to enclose the
      • code in something which will make it behave like a dropdown, in the fashion, I just described. Do you have knowledge of any directive or construct which can give me that desired mode of behavior?
     – Rune Hansen Nov 25 '18 at 13:13
  • Conserning what I have done so far, then I have just tried to put in the checkbox in ordinary dropdown list constructs, like the first link in my post. – Rune Hansen Nov 25 '18 at 13:28
  • [ui.bootstrap.dropdown](https://angular-ui.github.io/bootstrap/#!dropdown) uses `
  • ` elements.
    • – georgeawg Nov 25 '18 at 15:51
  • Most probably, bootstrap is not so good for me. I guess I am looking for a very clean solution, with only AngularJS, HTML, and JavaScript. Where I am going to put my dropdown, there is already a style, which I need to adopt. – Rune Hansen Nov 25 '18 at 19:18
  • Maybe I have found a solution, I need to check out if I can make this work for me. https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option – Rune Hansen Nov 25 '18 at 19:25