Selecting appropriate checkbox based upon Option selected from drop down using angularjs

Question

I need of making a angularjs code where on change of select causes appropriate checkeboxes to be marked. I am having around 200 records on a page. For eg If I have 50, 100 and 200 numbers in the drop down. Based on the selection of option the number of records needs to be checked. Means If I select 50 from drop down then 50 records needs to be checked automatically. Can anyone please help me in acheiving this functionality, thanks in advance.

Here is my HTML:

<div style="float:left;">
  <label class="col-sm-2 control-label">To:</label>
     <div class="col-sm-4">
       <select class="form-control" ng-model="option.type" ng-change="" id="selection" />
        <option value="">Select an Option</option>
        <option ng-repeat="option in typeOptionsselect" value="{option.value}}">{{option.name}}</option>
        </select>
     </div>
</div>

 <tr ng-repeat="person in lead | orderBy:predicate:reverse | filter:searchText " class="tHi" >
<td style="text-align:center"><input type="checkbox" ng-checked="master" name="ids[]" id="ids" value="{{person.fId}}"/></td>
<td  ng-click="editItem(person.fId)">{{person.companyname}}</td>
<td  ng-click="editItem(person.fId)">{{person.firstname}}</td>
<td  ng-click="editItem(person.fId)">{{person.lastname}}</td>
<td  ng-click="editItem(person.fId)">{{person.address1}}</td>
<td  ng-click="editItem(person.fId)">{{person.city}}</td>
<td  ng-click="editItem(person.fId)">{{person.reprsent}}</td>
<td  ng-click="editItem(person.fId)">{{person.cemail}}</td>
</tr>

$scope.typeOptionsselect = [ {
  name: '50',
  value: '50'
}, {
  name: '100',
  value: '100'
}, {
  name: '200',
  value: '200'
}];

score 0 · Answer 1 · answered Mar 31 '16 at 13:51

If I understand it correctly it should work like in the following demo or in this fiddle.

(In the demo I've reduced the counts of the select to 5, 10 & 20 for easier testing.)

On each change of the select it updates the selection by looping over the items and changes checked property to true. The storing of the previous count is only needed to remove the flag if you choose fewer items at another change.

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
  }
}

ul {
  list-style-type: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>

Selecting appropriate checkbox based upon Option selected from drop down using angularjs

1 Answers1