JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
  <!--<pre>{{mainCtrl.items | json : 2}}</pre>-->
  <pre class="selection">
    selected items:
    {{ mainCtrl.items | filter: {'checked':true} | json: 2}}
  </pre>
  <select ng-options="count for count in mainCtrl.checkCounts" ng-model="mainCtrl.checkedItemsCount" ng-change="mainCtrl.selectItems()">
    <option style="display:block" value=""></option>
  </select>
  <ul>
  <li ng-repeat="item in mainCtrl.items">
    {{item.id}} <input type="checkbox" ng-model="item.checked"/>{{item.value}}
  </li>
  </ul>
</div>

CSS

ul {
  list-style-type: none;
}

.selection {
  position: absolute;
  background-color: beige;
  left: 150px;
  width: 400px;
}

JavaScript

angular.module('demoApp', [])
	.controller('mainController', MainController)
  .constant('APP_CONSTS', {
  	list_items: 200,
    maxValue: 50
  });
  
function MainController(APP_CONSTS) {
	var vm = this,
  		i, lastCheckCount;
      
  vm.items = [];
  vm.checkCounts = [5, 10, 20];
  vm.checkedItemsCount = 0;
  
  vm.selectItems = selectItems;
  
  activate();
  
  function activate() {
    for (i=0; i< APP_CONSTS.list_items; i++) {
      vm.items.push({
        id: i,
        value: parseInt(Math.random()*APP_CONSTS.maxValue),
        checked: false
      });
    }
  }
  
  function selectItems() {
  	var counter;
    vm.checkedItemsCount = vm.checkedItemsCount || 0; // default to 0 if undef.
    
    if ( vm.checkedItemsCount < lastCheckCount ) {
    	// we need to remove the check because there are fewer selections
      for ( counter=vm.checkedItemsCount; counter < lastCheckCount; counter++) {
    		vm.items[counter].checked = false;
    	}
    }
    
    // add check to all items upt to checkItemsCount
    for ( counter=0; counter < vm.checkedItemsCount; counter++) {
    	vm.items[counter].checked = true;
    }
    
    lastCheckCount = vm.checkedItemsCount; // save count so we can check if we need special handling at next run
  }
}