increment variable when checkbox is checked - angular

Question

I want the $scope.selectedRecords variable to increment when a checkbox is checked. Right now nothing appears to happen, meaning the {{selectedRecords}} doesn't increment. There is no change.

Controller:

$scope.selectedRecords = 0;

// SET-UP ROW CLICK FOR CHECKBOX
$scope.setSelected = function(record) {

  if (!record.Selected) {
    record.Selected = true;
    $scope.selectedRecords += 1
  } else {
    record.Selected = false;
    $scope.selectedRecords -= 1

  }
}

HTML:

<h4>{{selectedRecords}} users selected</h4>
<tr ng-repeat="record in records | orderBy:sortType:sortReverse | filter:searchUsers" ng-class="class" class="row-link" ng-click="setSelected(record)">
<input type="checkbox" ng-model="record.Selected" ng-click="setSelected(record)">

Have you tried using ng-change instead of ng-click ? What does not work exactly ? Could you provide a CodePen that reproduces the error ? :-) — LoremIpsum
– LoremIpsum, Commented Sep 27, 2015 at 17:05
@LoremIpsum I have tried ng-change with the same result. I updated my OP with more info and I will work on a code-pen now. — CiscoKidx
– CiscoKidx, Commented Sep 27, 2015 at 17:08

LoremIpsum · Accepted Answer · 2015-09-27 17:23:43Z

Here's a working example : http://codepen.io/anon/pen/pjNWVL?editors=101

Can't really understand why your sample doesn't work, but mine might give you some help :-)

HTML :

<div ng-app="pouet" ng-controller="PouetCtrl">
  <h4>{{selectedRecords}} users selected</h4>
  <div  ng-repeat="record in records">
    <input type="checkbox" ng-model="record.selected" ng-click="setSelected(record)">
    <span class="label">{{record.label}}</span>
  </div>
</div>

JS :

var mod;

mod = angular.module('pouet', []);

mod.controller('PouetCtrl', function($scope) {
  $scope.records = [
    {
      selected: false,
      label: 'foo'
    }, {
      selected: true,
      label: 'bar'
    }, {
      selected: true,
      label: 'baz'
    }
  ];

  $scope.selectedRecords = ($scope.records.filter(function(record) {
    return record.selected;
  })).length;

  $scope.setSelected = function(record) {
    if (record.selected) {
      record.Selected = true;
      $scope.selectedRecords += 1;
    } else {
      record.selected = false;
      $scope.selectedRecords -= 1;
    }
  };
});

Andrew Eisenberg · Accepted Answer · 2015-09-27 17:17:48Z

0

The problem is that you have not defined record on the scope. If you add something like this to your controller:

$scope.record = {};

Then things should work.

Now, if you are in an ng-repeat block, things will be more complicated.

answered Sep 27, 2015 at 17:17

Andrew Eisenberg

28.9k9 gold badges100 silver badges156 bronze badges

Collectives™ on Stack Overflow

increment variable when checkbox is checked - angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related