3

I have successfully created functionality to check a hidden checkbox on the ng-click of the row that the checkbox exists in that is generated with an ng-repeat. However, I also have functionality that adds that item to a separate array when the checkbox is checked using the ng-change directive.

My code works perfectly if I un-hide the element and check the checkbox directly, but if I use the ng-click directive on the TR, the checkbox gets checked (visibly) but the array isn't updated. If I then click on it again, it remains checked and the item is added to the new array.

This isn't an issue where the ng-click is taking two clicks to fire. Here is my markup:

<tr ng-cloak ng-repeat="item in mostRecent | orderBy:sortType:sortReverse | filter: query" class="hovered" ng-class="{'hide':showReports && item.status == 'Not Started' || showReports && item.status == 'inProgress','rep-checked': bool}" ng-click="bool = !bool">
        <td class="hidden"><div class="checkbox">
            <label class="checkbox">
              <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)">
            </label>
          </div></td>

and the js:

$scope.isChecked = function(id) {
          var match = false;
          for(var i=0 ; i < $scope.selectionData.length; i++) {
              if($scope.selectionData[i].id == id){
                match = true;
              }
          }
          return match;
};

// Create a new array from the selected data
$scope.selectionData = [];

var selectionData = $scope.selectionData;
var result = selectionData.filter(function(e){ return e.id == id; });

$scope.sync = function(bool, item){
                if ($scope.selectionData) {
                  $scope.selectionData.push(item);
                }
                else {
                  $scope.selectionData.splice(item);
                }
                    console.log('check' + $scope.selectionData);
};
Christian Hill
  • 378
  • 1
  • 3
  • 17

1 Answers1

1

After some deeper research, I found that the ng-click function on the input isn't registering because the ng-click function of the tr element isn't actually emulating a click event on the input. I added a dynamic ID and replaced the ng-click function with a javascript function of

getElementById('checkboxID').click();

And it worked as expected.

Christian Hill
  • 378
  • 1
  • 3
  • 17