How do I bind to list of checkbox values with AngularJS

Question

I have a few checkboxes    lt input type  checkbox  value  apple  checked gt   lt input type  checkbox  value  orange  gt   lt input type  checkbox  value  pear  checked gt   lt input type  checkbox  value  naartjie  gt    That I would like to bind to a list in my controller such that whenever a checkbox is changed the controller maintains a list of all the checked values  for example    apple    pear     ng-model seems to only be able to bind the value of one single checkbox to a variable in the controller   Is there another way to do it so that I can bind the four checkboxes to a list in the controller

User · Answer

A simple solution    lt div ng-controller  MainCtrl  gt     lt label ng-repeat   color enabled  in colors  gt         lt input type  checkbox  ng-model  colors color     gt    color       lt  label gt     lt p gt colors    colors   lt  p gt   lt  div gt    lt script gt    var app   angular module  plunker           app controller  MainCtrl   function  scope          scope colors    Blue  true  Orange  true          lt  script gt    http   plnkr co edit U4VD61 p preview

User · Answer

You don t have to write all that code   AngularJS will keep the model and the checkboxes in sync simply by using ngTrueValue and ngFalseValue  Codepen here   http   codepen io paulbhartzog pen kBhzn  Code snippet    lt p ng-repeat  item in list1  class  item  id    item id    gt     lt strong gt   item id   lt  strong gt   lt input name  obj1 data  type  checkbox  ng-model  list1  index  data  ng-true-value  1  ng-false-value  0  gt  Click this to change data value below  lt  p gt   lt pre gt   list1   json   lt  pre gt

User · Answer

Based on answers in this thread I ve created checklist-model directive that covers all cases    simple array of primitives  array of objects  pick id or whole object  object properties iteration   For topic-starter case it would be    lt label ng-repeat  fruit in   apple    orange    pear    naartjie    gt       lt input type  checkbox  checklist-model  selectedFruits  checklist-value  fruit  gt    fruit    lt  label gt

User · Answer

lt input type  checkbox  ng-repeat  fruit in fruits    ng-checked  checkedFruits indexOf fruit     -1  ng-click  toggleCheck fruit   gt       function SomeCtrl   scope         scope fruits     apple  orange  pear  naartjie         scope checkedFruits            scope toggleCheck   function  fruit            if   scope checkedFruits indexOf fruit      -1                 scope checkedFruits push fruit             else                scope checkedFruits splice  scope checkedFruits indexOf fruit   1

User · Answer

Try my baby       myApp filter  inputSelected   function      return function formData       var keyArr           var word           Object keys formData  forEach function key       if  formData key            var keyCap   key charAt 0  toUpperCase     key slice 1         for  var char   0  char lt keyCap length  char               if  keyCap char     keyCap char  toUpperCase               var spacedLetter        keyCap char             word push spacedLetter                     else             word push keyCap char                                keyArr push word join          word                  return keyArr toString                 Then for any ng-model with checkboxes  it will return a string of all the input you selected    lt label for  Heard about ITN  gt How did you hear about ITN     lt  label gt  lt br gt   lt label class  checkbox-inline  gt  lt input ng-model  formData heardAboutItn brotherOrSister  type  checkbox   gt Brother or Sister lt  label gt   lt label class  checkbox-inline  gt  lt input ng-model  formData heardAboutItn friendOrAcquaintance  type  checkbox   gt Friend or Acquaintance lt  label gt      formData heardAboutItn   inputSelected       returns Brother or Sister  Friend or Acquaintance

User · Answer

Here is yet another solution  The upside of my solution    It does not need any additional watches  which may have an impact on performance  It does not require any code in the controller keeping it clean The code is still somewhat short It is requires very little code to reuse in multiple places because it is just a directive   Here is the directive   function ensureArray o        var lAngular   angular      if  lAngular isArray o     o     null    lAngular isUndefined o             return o            return  o      function checkboxArraySetDirective         return           restrict   A           require   ngModel           link  function scope  element  attrs  ngModel                var name   attrs checkboxArraySet               ngModel  formatters push function value                    return  ensureArray value         indexOf name   gt   0                               ngModel  parsers push function value                    var modelValue   ensureArray ngModel  modelValue                             oldPos   modelValue indexOf name                       wasSet   oldPos  gt   0                  if  value                        if   wasSet                            modelValue   angular copy modelValue                           modelValue push name                                           else if  wasSet                        modelValue   angular copy modelValue                       modelValue splice oldPos  1                                     return modelValue                                      At the end then just use it like this    lt input ng-repeat  fruit in   apple    banana           type  checkbox  ng-model  fruits  checkbox-array-set    fruit      gt    And that is all there is  The only addition is the checkbox-array-set attribute

User · Answer

If you have multiple checkboxes on the same form   The controller code   vm doYouHaveCheckBox     aaa    ccc    bbb    vm desiredRoutesCheckBox     ddd    ccc    Default    vm doYouHaveCBSelection       vm desiredRoutesCBSelection         View code    lt div ng-repeat  doYouHaveOption in vm doYouHaveCheckBox  gt       lt div class  action-checkbox  gt           lt input id    doYouHaveOption    type  checkbox  value    doYouHaveOption    ng-checked  vm doYouHaveCBSelection indexOf doYouHaveOption   gt  -1  ng-click  vm toggleSelection doYouHaveOption vm doYouHaveCBSelection     gt           lt label for    doYouHaveOption    gt  lt  label gt            doYouHaveOption        lt  div gt   lt  div gt    lt div ng-repeat  desiredRoutesOption in vm desiredRoutesCheckBox  gt        lt div class  action-checkbox  gt             lt input id    desiredRoutesOption    type  checkbox  value    desiredRoutesOption    ng-checked  vm desiredRoutesCBSelection indexOf desiredRoutesOption   gt  -1  ng-click  vm toggleSelection desiredRoutesOption vm desiredRoutesCBSelection     gt             lt label for    desiredRoutesOption    gt  lt  label gt              desiredRoutesOption         lt  div gt   lt  div gt

User · Answer

Another simple directive could be like   var appModule   angular module  appModule         appModule directive  checkList    function      return       restrict   A       scope            selectedItemsArray               value                 link  function  scope  elem            scope  watchCollection  selectedItemsArray   function  newValue                if    contains newValue  scope value                     elem prop  checked   true                 else                   elem prop  checked   false                                     if    contains scope selectedItemsArray  scope value                 elem prop  checked   true                     elem on  change   function                  if  elem prop  checked                      if     contains scope selectedItemsArray  scope value                         scope  apply                          function                                  scope selectedItemsArray push scope value                                                                                    else                   if    contains scope selectedItemsArray  scope value                         var index   scope selectedItemsArray indexOf scope value                       scope  apply                          function                                  scope selectedItemsArray splice index  1                                                                           console log scope selectedItemsArray                               The controller   appModule controller  sampleController      scope     function   scope           region  Scope Members       scope sourceArray      id  1  text   val1       id  2  text   val2           scope selectedItems     1           endregion      scope selectAll   function             scope selectedItems     1    2              scope unCheckAll   function             scope selectedItems                     And the HTML    lt ul class  list-unstyled filter-list  gt   lt li data-ng-repeat  item in sourceArray  gt       lt div class  checkbox  gt           lt label gt               lt input type  checkbox  check-list selected-items-array  selectedItems  value    item id    gt                item text            lt  label gt       lt  div gt   lt  li gt      I m also including a Plunker  http   plnkr co edit XnFtyij4ed6RyFwnFN6V p preview

User · Answer

You can combine AngularJS and jQuery  For example  you need to define an array   scope selected        in the controller    lt label ng-repeat  item in items  gt       lt input type  checkbox  ng-model  selected  index   ng-true-value     item     gt   item    lt  label gt    You can get an array owning the selected items  Using method alert JSON stringify  scope selected    you can check the selected items

User · Answer

I ve put an array in the controller    scope statuses      name   Shutdown - Reassessment Required           name   Under Construction           name   Administrative Cancellation           name   Initial           name   Shutdown - Temporary           name   Decommissioned           name   Active           name   SO Shutdown       On the markup I ve put something like following   lt div ng-repeat  status in  scope statuses  gt      lt input type  checkbox  name  unit status  ng-model   scope checkboxes status name   gt    status name       lt br gt                           lt  div gt     scope checkboxes     The output was the following  in the controller I just needed to check whether its true or false  true for checked  absent false for unchecked       Administrative Cancellation  true   Under Construction  true   Shutdown - Reassessment Required  true   Decommissioned  true   Active  true     Hope this helps

User · Answer

A simple HTML only way of doing it    x000D   x000D   lt input type  checkbox  x000D         ng-checked  fruits indexOf  apple    gt  -1  x000D         ng-click  fruits indexOf  apple    gt  -1   fruits splice fruits indexOf  apple    1    fruits push  apple    gt  x000D   lt input type  checkbox  x000D         ng-checked  fruits indexOf  orange    gt  -1  x000D         ng-click  fruits indexOf  orange    gt  -1   fruits splice fruits indexOf  orange    1    fruits push  orange    gt  x000D   lt input type  checkbox  x000D         ng-checked  fruits indexOf  pear    gt  -1  x000D         ng-click  fruits indexOf  pear    gt  -1   fruits splice fruits indexOf  pear    1    fruits push  pear    gt  x000D   lt input type  checkbox  x000D         ng-checked  fruits indexOf  naartjie    gt  -1  x000D         ng-click  fruits indexOf  apple    gt  -1   fruits splice fruits indexOf  apple    1    fruits push  naartjie    gt  x000D   x000D   x000D

User · Answer

Using a string of  index can help to use a hashmap of selected values    lt ul gt       lt li ng-repeat  someItem in someArray  gt           lt input type  checkbox  ng-model  someObject  index toString       gt       lt  li gt   lt  ul gt    This way the ng-model object gets updated with the key representing the index    scope someObject         After a while  scope someObject should look something like    scope someObject          0  true       4  false       1  true      This method won t work for all situations  but it is easy to implement

User · Answer

I have adapted Yoshi s accepted answer to deal with complex objects  instead of strings    HTML   lt div ng-controller  TestController  gt       lt p ng-repeat  permission in allPermissions  gt           lt input type  checkbox  ng-checked  selectedPermissions containsObjectWithProperty  id   permission id   ng-click  toggleSelection permission     gt            permission name        lt  p gt        lt hr   gt        lt p gt allPermissions     lt span ng-repeat  permission in allPermissions  gt   permission name      lt  span gt  lt  p gt       lt p gt selectedPermissions     lt span ng-repeat  permission in selectedPermissions  gt   permission name      lt  span gt  lt  p gt   lt  div gt    JavaScript  Array prototype indexOfObjectWithProperty   function propertyName  propertyValue        for  var i   0  len   this length  i  lt  len  i              if  this i  propertyName      propertyValue  return i             return -1       Array prototype containsObjectWithProperty   function propertyName  propertyValue        return this indexOfObjectWithProperty propertyName  propertyValue     -1       function TestController  scope         scope allPermissions            id    1   name     ROLE USER            id    2   name     ROLE ADMIN            id    3   name     ROLE READ            id    4   name     ROLE WRITE             scope selectedPermissions            id    1   name     ROLE USER            id    3   name     ROLE READ             scope toggleSelection   function toggleSelection permission            var index    scope selectedPermissions indexOfObjectWithProperty  id   permission id            if  index  gt  -1                 scope selectedPermissions splice index  1             else                scope selectedPermissions push permission                        Working example  http   jsfiddle net tCU8v

User · Answer

Inspired from Yoshi s post above  Here is the plnkr    x000D   x000D   function      x000D      x000D     angular x000D         module  APP       x000D         controller  demoCtrl      scope   function   scope    x000D           var dc   this x000D            x000D           dc list     x000D               Selection1   x000D               Selection2   x000D               Selection3  x000D             x000D   x000D           dc multipleSelections      x000D           dc individualSelections      x000D            x000D              Using splice and push methods to make use of  x000D              the same  selections  object passed by reference to the  x000D              addOrRemove function as using  selections        x000D              creates a new object within the scope of the  x000D              function which doesn t help in two way binding  x000D           dc addOrRemove   function  selectedItems  item  isMultiple    x000D              var itemIndex   selectedItems indexOf item  x000D              var isPresent    itemIndex  gt  -1  x000D              if  isMultiple    x000D                 if  isPresent    x000D                    selectedItems splice itemIndex  1  x000D                   else   x000D                    selectedItems push item  x000D                   x000D                else   x000D                 if  isPresent    x000D                    selectedItems splice 0  1  x000D                   else   x000D                    selectedItems splice 0  1  item  x000D                   x000D                x000D             x000D            x000D            x000D      x000D       x000D  label   x000D    display  block    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D      lt head gt  x000D         lt link rel  stylesheet  href  style css    gt  x000D      lt  head gt  x000D   x000D      lt body ng-app  APP  ng-controller  demoCtrl as dc  gt  x000D         lt h1 gt checkbox-select demo lt  h1 gt  x000D         x000D         lt h4 gt Multiple Selections lt  h4 gt  x000D         lt label ng-repeat  thing in dc list  gt  x000D            lt input  x000D              type  checkbox   x000D              ng-checked  dc multipleSelections indexOf thing   gt  -1  x000D              ng-click  dc addOrRemove dc multipleSelections  thing  true   x000D            gt    thing   x000D         lt  label gt  x000D         x000D         lt p gt  x000D           dc multipleSelections  -   dc multipleSelections   x000D         lt  p gt  x000D         x000D         lt hr gt  x000D         x000D         lt h4 gt Individual Selections lt  h4 gt  x000D         lt label ng-repeat  thing in dc list  gt  x000D            lt input  x000D              type  checkbox   x000D              ng-checked  dc individualSelections indexOf thing   gt  -1  x000D              ng-click  dc addOrRemove dc individualSelections  thing  false   x000D            gt    thing   x000D         lt  label gt  x000D         x000D         lt p gt  x000D           dc invidualSelections  -   dc individualSelections   x000D         lt  p gt  x000D         x000D         lt script data-require  jquery 3 0 0  data-semver  3 0 0  src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery js  gt  lt  script gt  x000D         lt script data-require  angular js 1 5 6  data-semver  1 5 6  src  https   code angularjs org 1 5 6 angular min js  gt  lt  script gt  x000D         lt script src  script js  gt  lt  script gt  x000D      lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

There are two ways to approach this problem  Either use a simple array or an array of objects  Each solution has it pros and cons  Below you ll find one for each case     With a simple array as input data  The HTML could look like    lt label ng-repeat  fruitName in fruits  gt     lt input     type  checkbox      name  selectedFruits        value    fruitName        ng-checked  selection indexOf fruitName   gt  -1      ng-click  toggleSelection fruitName      gt    fruitName    lt  label gt    And the appropriate controller code would be   app controller  SimpleArrayCtrl      scope   function SimpleArrayCtrl  scope          Fruits    scope fruits     apple    orange    pear    naartjie          Selected fruits    scope selection     apple    pear          Toggle selection for a given fruit by name    scope toggleSelection   function toggleSelection fruitName        var idx    scope selection indexOf fruitName           Is currently selected     if  idx  gt  -1           scope selection splice idx  1                 Is newly selected     else          scope selection push fruitName                     Pros  Simple data structure and toggling by name is easy to handle  Cons  Add remove is cumbersome as two lists  the input and selection  have to be managed    With an object array as input data  The HTML could look like    lt label ng-repeat  fruit in fruits  gt     lt  --     - Use  value    fruit name     to give the input a real value  in case the form gets submitted       traditionally      - Use  ng-checked  fruit selected   to have the checkbox checked based on some angular expression        no two-way-data-binding       - Use  ng-model  fruit selected   to utilize two-way-data-binding  Note that   selected        is arbitrary  The property name could be anything and will be created on the object if not present    -- gt     lt input     type  checkbox      name  selectedFruits        value    fruit name        ng-model  fruit selected     gt    fruit name    lt  label gt    And the appropriate controller code would be   app controller  ObjectArrayCtrl      scope    filterFilter   function ObjectArrayCtrl  scope  filterFilter          Fruits    scope fruits           name   apple      selected  true          name   orange     selected  false          name   pear       selected  true          name   naartjie   selected  false              Selected fruits    scope selection             Helper method to get selected fruits    scope selectedFruits   function selectedFruits         return filterFilter  scope fruits    selected  true                Watch fruits for changes    scope  watch  fruits filter  selected true    function  nv         scope selection   nv map function  fruit          return fruit name               true          Pros  Add remove is very easy  Cons  Somewhat more complex data structure and toggling by name is cumbersome or requires a helper method    Demo  http   jsbin com ImAqUC 1

User · Answer

I think the following way is more clear and useful for nested ng-repeats  Check it out on Plunker   Quote from this thread    lt html ng-app  plunker  gt       lt head gt           lt title gt Test lt  title gt           lt script src  https   ajax googleapis com ajax libs angularjs 1 2 4 angular min js  gt  lt  script gt       lt  head gt        lt body ng-controller  MainCtrl  gt           lt div ng-repeat  tab in mytabs  gt                lt h1 gt   tab name   lt  h1 gt               lt div ng-repeat  val in tab values  gt                   lt input type  checkbox  ng-change  checkValues    ng-model  val checked   gt               lt  div gt           lt  div gt            lt br gt           lt pre gt    selected    lt  pre gt                lt script gt                  var app   angular module  plunker                         app controller  MainCtrl   function   scope  filter                         scope mytabs                                     name   tab1                    values                           value   value1  checked false                           value   value2   checked  false                           value   value3   checked  false                           value   value4   checked  false                                                                      name   tab2                    values                           value   value1   checked  false                           value   value2   checked  false                           value   value3   checked  false                           value   value4   checked  false                                                                                scope selected                           scope checkValues   function                              angular forEach  scope mytabs  function  value  index                             var selectedItems    filter  filter   value values    checked  true                              angular forEach selectedItems  function  value  index                                  scope selected push value                                                                                 console log  scope selected                                                       lt  script gt       lt  body gt   lt  html gt

User · Answer

lt div ng-app  app   gt       lt div ng-controller  MainCtrl   gt          lt ul gt           lt li ng-repeat  tab in data  gt            lt input type  checkbox  ng-click  change  index confirm   ng-model  confirm    gt             tab name              lt  li gt        lt  ul gt        val       lt  div gt    lt  div gt    var app   angular module  app         app controller  MainCtrl  function  scope     scope val        scope confirm false     scope data             name  vijay                      name  krishna                name  Nikhil                     scope temp      scope change function index confirm        console log confirm       if  confirm          scope val  push  scope data index                 else       scope temp  scope data index           var d   scope val  indexOf  scope temp           if d  undefined              scope val  splice d 1

User · Answer

The following solution seems like a good option    lt label ng-repeat  fruit in fruits  gt     lt input     type  checkbox      ng-model  fruit checked      ng-value  true     gt    fruit fruitName    lt  label gt    And in controller model value fruits will be like this    scope fruits              name    apple        checked   true               name    orange                name    grapes        checked   true

User · Answer

Check out this directive that manages effectively lists of checkboxes  I hope it works for you  CheckList Model

User · Answer

Since you accepted an answer in which a list was not used  I ll assume the answer to my comment question is  No  it doesn t have to be a list    I also had the impression that maybe you were rending the HTML server side  since  checked  is present in your sample HTML  this would not be needed if ng-model were used to model your checkboxes    Anyway  here s what I had in mind when I asked the question  also assuming you were generating the HTML server-side    lt div ng-controller  MyCtrl    ng-init  checkboxes    apple  true  orange  false  pear  true  naartjie  false   gt       lt input type  checkbox  ng-model  checkboxes apple  gt apple      lt input type  checkbox  ng-model  checkboxes orange  gt orange      lt input type  checkbox  ng-model  checkboxes pear  gt pear      lt input type  checkbox  ng-model  checkboxes naartjie  gt naartjie      lt br gt   checkboxes    lt  div gt    ng-init allows server-side generated HTML to initially set certain checkboxes   Fiddle

User · Answer

Here is the jsFillde link for the same  http   jsfiddle net techno2mahi Lfw96ja6    This uses the directive which is available for download at http   vitalets github io checklist-model    This is the good to have directive as your application will need this functionality much often   The code is below   HTML    lt div class  container  gt       lt div class  ng-scope  ng-app  app  ng-controller  Ctrl1  gt           lt div class  col-xs-12 col-sm-6  gt               lt h3 gt Multi Checkbox List Demo lt  h3 gt               lt div class  well  gt    lt  -- ngRepeat  role in roles -- gt                   lt label ng-repeat  role in roles  gt                       lt input type  checkbox  checklist-model  user roles  checklist-value  role  gt    role                    lt  label gt               lt  div gt                lt br gt               lt button ng-click  checkAll    gt check all lt  button gt               lt button ng-click  uncheckAll    gt uncheck all lt  button gt               lt button ng-click  checkFirst    gt check first lt  button gt               lt div gt                   lt h3 gt Selected User Roles  lt  h3 gt                   lt pre class  ng-binding  gt   user roles json   lt  pre gt               lt  div gt                lt br gt               lt div gt  lt b  gt Provided by techno2Mahi lt  b gt  lt  div gt           lt  div gt    JavaScript  var app   angular module  app     checklist-model     app controller  Ctrl1   function  scope       scope roles          guest        user        customer        admin          scope user         roles    user           scope checkAll   function          scope user roles   angular copy  scope roles           scope uncheckAll   function          scope user roles               scope checkFirst   function          scope user roles splice 0   scope user roles length        scope user roles push  guest

User · Answer

Here s a quick little reusable directive that seems to do what you re looking to do  I ve simply called it checkList  It updates the array when the checkboxes change  and updates the checkboxes when the array changes   app directive  checkList   function       return       scope          list    checkList         value                 link  function scope  elem  attrs          var handler   function setup            var checked   elem prop  checked            var index   scope list indexOf scope value            if  checked  amp  amp  index    -1              if  setup  elem prop  checked   false             else scope list push scope value             else if   checked  amp  amp  index    -1              if  setup  elem prop  checked   true             else scope list splice index  1                             var setupHandler   handler bind null  true         var changeHandler   handler bind null  false          elem bind  change   function             scope  apply changeHandler                   scope  watch  list   setupHandler  true                    Here s a controller and a view that shows how you might go about using it    lt div ng-app  myApp  ng-controller  MainController  gt     lt span ng-repeat  fruit in fruits  gt       lt input type  checkbox  value    fruit    check-list  checked fruits  gt    fruit   lt br   gt     lt  span gt      lt div gt The following fruits are checked    checked fruits   json   lt  div gt      lt div gt Add fruit to the array manually       lt button ng-repeat  fruit in fruits  ng-click  addFruit fruit   gt   fruit   lt  button gt     lt  div gt   lt  div gt    app controller  MainController   function  scope       scope fruits     apple    orange    pear    naartjie       scope checked fruits     apple    pear       scope addFruit   function fruit        if   scope checked fruits indexOf fruit     -1  return       scope checked fruits push fruit               The buttons demonstrate that changing the array will also update the checkboxes    Finally  here is an example of the directive in action on Plunker  http   plnkr co edit 3YNLsyoG4PIBW6Kj7dRK p preview

User · Answer

I like Yoshi s answer  I enhanced it so You can use the same function for multiple lists    lt label ng-repeat  fruitName in fruits  gt   lt input type  checkbox  name  selectedFruits    value    fruitName    ng-checked  selection indexOf fruitName   gt  -1  ng-click  toggleSelection fruitName  selection   gt    fruitName    lt  label gt     lt label ng-repeat  veggieName in veggies  gt   lt input type  checkbox  name  selectedVeggies    value    veggieName    ng-checked  veggieSelection indexOf veggieName   gt  -1  ng-click  toggleSelection veggieName  veggieSelection   gt    veggieName    lt  label gt     app controller  SimpleArrayCtrl      scope   function SimpleArrayCtrl  scope         fruits    scope fruits     apple    orange    pear    naartjie       scope veggies     lettuce    cabbage    tomato        selected fruits    scope selection     apple    pear       scope veggieSelection     lettuce        toggle selection for a given fruit by name    scope toggleSelection   function toggleSelection selectionName  listSelection        var idx   listSelection indexOf selectionName           is currently selected     if  idx  gt  -1          listSelection splice idx  1                 is newly selected     else         listSelection push selectionName                     http   plnkr co edit KcbtzEyNMA8s1X7Hja8p p preview

User · Answer

There is a way to work on the array directly and use ng-model at the same time through ng-model-options    getterSetter  true      The trick is to use a getter setter function in your ng-model  This way you can use an array as your real model and  fake  the booleans in the input s model    lt label ng-repeat  fruitName in   apple    orange    pear    naartjie    gt     lt input     type  checkbox      ng-model  fruitsGetterSetterGenerator fruitName       ng-model-options    getterSetter  true       gt    fruitName    lt  label gt          scope fruits     apple    pear       pre checked   scope fruitsGetterSetterGenerator   function fruitName       return function myGetterSetter nowHasFruit           if  nowHasFruit     undefined                   Setter             fruitIndex    scope fruits indexOf fruit               didHaveFruit    fruitIndex     -1               mustAdd     didHaveFruit  amp  amp  nowHasFruit               mustDel    didHaveFruit  amp  amp   nowHasFruit               if  mustAdd                    scope fruits push fruit                             if  mustDel                    scope fruits splice fruitIndex  1                                   else                  Getter             return  scope user fruits indexOf fruit      -1                      CAVEAT You shouldn t use this method if your arrays are big as myGetterSetter will be called a lot of times   For more on that  see https   docs angularjs org api ng directive ngModelOptions

User · Answer

In the HTML  supposing that the checkboxes are in the first column of every row in a table     lt tr ng-repeat  item in fruits  gt       lt td gt  lt input type  checkbox  ng-model  item checked  ng-click  getChecked item   gt  lt  td gt       lt td ng-bind  fruit name  gt  lt  td gt       lt td ng-bind  fruit color  gt  lt  td gt           lt  tr gt    In the controllers js file      The data initialization part     scope fruits                 name              color                         name              color                                The checked or not data is stored in the object array elements themselves  scope fruits forEach function item       item checked   false          The array to store checked fruit items  scope checkedItems           Every click on any checkbox will trigger the filter to find checked items  scope getChecked   function item        scope checkedItems    filter  filter    scope fruits  checked true

User · Answer

Using this example of the  Umur Kontaci  I think in using to catch selected data throughout another object array  like a edit page   Catch options at the database    Toggle a some option    As example  all colors json in below          colors                            id   1               title    Preto -  000000                                    id   2               title    Azul -  005AB1                                    id   3               title    Azul Marinho -  001A66                                    id   4               title    Amarelo -  FFF100                                    id   5               title    Vermelho -  E92717                                    id   6               title    Verde -  008D2F                                    id   7               title    Cinza -  8A8A8A                                    id   8               title    Prata -  C8C9CF                                    id   9               title    Rosa -  EF586B                                    id   10               title    Nude -  E4CAA6                                    id   11               title    Laranja -  F68700                                    id   12               title    Branco -  FFFFFF                                    id   13               title    Marrom -  764715                                    id   14               title    Dourado -  D9A300                                    id   15               title    Bordo -  57001B                                    id   16               title    Roxo -  3A0858                                    id   18               title    Estampado                                     id   17               title    Bege -  E5CC9D                      And 2 types of data object  array with one object and object containing two more object data    Two items selected catched at the database      id  12  title   Branco -  FFFFFF     id  16  title   Roxo -  3A0858     One item selected catched at the database     id  12  title   Branco -  FFFFFF      And here  my javascript code          Add this code after catch data of database       vm checkedColors       var  colorObj   vm formData color ids  var  color ids        if  angular isObject  colorObj            vm checkedColors push  colorObj        color ids push  colorObj     else if  angular isArray  colorObj         angular forEach  colorObj  function  value  key               vm checkedColors push key         value            color ids push key         value              angular forEach vm productColors  function  object        angular forEach  color ids  function  color            if  color id     object id                vm checkedColors push object                                 Add this code in your js function initialized in this HTML page     vm toggleColor   function  color        console log  toggleColor is     color        if  vm checkedColors indexOf color      -1            vm checkedColors push color         else           vm checkedColors splice vm checkedColors indexOf color   1             vm formData color ids   vm checkedColors       My Html code    lt div class  checkbox  ng-repeat  color in productColors  gt       lt label gt           lt input type  checkbox                 ng-checked  checkedColors indexOf color     -1                 ng-click  toggleColor color    gt           lt   color title   gt       lt  label gt   lt  div gt    lt p gt checkedColors Output  lt  p gt   lt pre gt  lt   checkedColors   gt  lt  pre gt     Edit  Refactored code below   function makeCheckedOptions objectOptions  optionObj        var checkedOptions           var savedOptions            if  angular isObject optionObj             savedOptions push optionObj         else if  angular isArray optionObj             angular forEach optionObj  function  value  key                savedOptions push key         value                          angular forEach objectOptions  function  object            angular forEach savedOptions  function  color                if  color id     object id                    checkedOptions push object                                          return checkedOptions      And call new method as below   vm checkedColors   makeCheckedOptions productColors  vm formData color ids     That s it

User · Answer

Take a look this  checklist-model   It works with JavaScript arrays  and objects and it can use static HTML checkboxes  without ng-repeat   lt label gt  lt input type  checkbox  checklist-model  roles  value  admin  gt  Administrator lt  label gt   lt label gt  lt input type  checkbox  checklist-model  roles  value  customer  gt  Customer lt  label gt   lt label gt  lt input type  checkbox  checklist-model  roles  value  guest  gt  Guest lt  label gt   lt label gt  lt input type  checkbox  checklist-model  roles  value  user  gt  User lt  label gt    And the JavaScript side   var app   angular module  app     checklist-model     app controller  Ctrl4a   function  scope         scope roles

User · Answer

I think the easiest workaround would be to use  select  with  multiple  specified    lt select ng-model  selectedfruit  multiple ng-options  v for v in fruit  gt  lt  select gt    Otherwise  I think you ll have to process the list to construct the list  by  watch  ing the model array bind with checkboxes

User · Answer

Based on my other post here  I have made a reusable directive   Check out the GitHub repository   x000D   x000D   function      x000D      x000D     angular x000D         module  checkbox-select       x000D         directive  checkboxModel      compile   function   compile    x000D           return   x000D              restrict   A   x000D              link  function  scope  ele  attrs    x000D                    Defining updateSelection function on the parent scope x000D                 if   scope  parent updateSelections    x000D                       Using splice and push methods to make use of  x000D                       the same  selections  object passed by reference to the  x000D                       addOrRemove function as using  selections        x000D                       creates a new object within the scope of the  x000D                       function which doesn t help in two way binding  x000D                    scope  parent updateSelections   function  selectedItems  item  isMultiple    x000D                       var itemIndex   selectedItems indexOf item  x000D                       var isPresent    itemIndex  gt  -1  x000D                       if  isMultiple    x000D                          if  isPresent    x000D                             selectedItems splice itemIndex  1  x000D                            else   x000D                             selectedItems push item  x000D                            x000D                         else   x000D                          if  isPresent    x000D                             selectedItems splice 0  1  x000D                            else   x000D                             selectedItems splice 0  1  item  x000D                            x000D                         x000D                         x000D                   x000D                  x000D                    Adding or removing attributes x000D                 ele attr  ng-checked   attrs checkboxModel     indexOf     attrs checkboxValue       gt  -1   x000D                 var multiple   attrs multiple    true     false  x000D                 ele attr  ng-click    updateSelections      attrs checkboxModel  attrs checkboxValue  multiple  join             x000D                  x000D                    Removing the checkbox-model attribute   x000D                    it will avoid recompiling the element infinitly x000D                 ele removeAttr  checkbox-model   x000D                 ele removeAttr  checkbox-value   x000D                 ele removeAttr  multiple   x000D                  x000D                  compile ele  scope  x000D                x000D             x000D            x000D      x000D           Defining app and controller x000D        angular x000D         module  APP     checkbox-select    x000D         controller  demoCtrl      scope   function   scope    x000D           var dc   this x000D           dc list     x000D               selection1   x000D               selection2   x000D               selection3  x000D             x000D            x000D              Define the selections containers here x000D           dc multipleSelections      x000D           dc individualSelections      x000D            x000D      x000D       x000D  label   x000D    display  block    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D      lt head gt  x000D         lt link rel  stylesheet  href  style css    gt  x000D         x000D      lt  head gt  x000D      x000D      lt body ng-app  APP  ng-controller  demoCtrl as dc  gt  x000D         lt h1 gt checkbox-select demo lt  h1 gt  x000D         x000D         lt h4 gt Multiple Selections lt  h4 gt  x000D         lt label ng-repeat  thing in dc list  gt  x000D            lt input type  checkbox  checkbox-model  dc multipleSelections  checkbox-value  thing  multiple gt  x000D             thing   x000D         lt  label gt  x000D         lt p gt dc multipleSelecitons -   dc multipleSelections   lt  p gt  x000D         x000D         lt h4 gt Individual Selections lt  h4 gt  x000D         lt label ng-repeat  thing in dc list  gt  x000D            lt input type  checkbox  checkbox-model  dc individualSelections  checkbox-value  thing  gt  x000D             thing   x000D         lt  label gt  x000D         lt p gt dc individualSelecitons -   dc individualSelections   lt  p gt  x000D         x000D         lt script data-require  jquery 3 0 0  data-semver  3 0 0  src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery js  gt  lt  script gt  x000D         lt script data-require  angular js 1 5 6  data-semver  1 5 6  src  https   code angularjs org 1 5 6 angular min js  gt  lt  script gt  x000D         lt script src  script js  gt  lt  script gt  x000D      lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

[javascript] How do I bind to list of checkbox values with AngularJS?

Examples related to javascript

Examples related to angularjs