JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='app' ng-controller='ctl as c'>
    <input 
    ng-repeat='box in c.cboxes track by $index' 
    type='checkbox' 
    ng-model='box.val' 
    ng-change='c.vals()'
    />
    <div>
      <ul>
        <li ng-repeat='item in c.data track by $index'>
          {{item}}
        </li>
      </ul>
    </div>
</div>

JavaScript

angular.module('app', [])
.controller('ctl', ctl);

function ctl() {
	var self = this;
  self.one = false;
  self.two = false;
  self.three = false;
  self.data = [];
  
 	this.vals = function() {
  	var length = self.cboxes.length;
    self.data.length = 0;
    for(var i = 0; i < length; i++) {
    	var cbox = self.cboxes[i];
    	if(cbox.val) {
      	var length2 = cbox.data.length;
        for(var j = 0; j < length2; j++) {
        	self.data.push(cbox.data[j]);
        }
      }
    }
  };
  
  self.cboxes = [
  	{
    	id: 0,
      val: false,
      data: [
        	'apple',
          'orange',
          'pear'
        ]
    },
    {
    	id: 1,
      val: false,
      data: [
        	'strawberry',
          'banana',
          'mango'
        ]
    },
    {
    	id: 2,
      val: false,
      data:[
        	'pineapple',
          'kiwi',
          'lemon'
        ]
    },
  ];
}