I am taking data from table and display as multi check checkboxes.My checkboxes when checked pushes data on array for that particular checkbox.But when unchecked ,the respective data should be removed from the array.How can I achieve this?

HTML:

<div ng-repeat="data in filters.status" >
    <label class="Form-label--tick">
        <input type="checkbox" value="data.id" id="status" ng-model="status" class="Form-label-checkbox"  ng-change="IfCheck(data.id,status)" >
        <span class="Form-label-text"> {{data.status}}</span>
    </label>
</div>

Javascript:

<script>
    $scope.IfCheck = function (data, check) {
        if (check) {
            status.push(data);
            $scope.checkedData[0].status = status;
        }
        else {
            var index = $scope.status.indexOf(data);
            $scope.status.splice(index);
        }

    };
</script>

I am taking data from table and display as multi check checkboxes.My checkboxes when checked pushes data on array for that particular checkbox.But when unchecked ,the respective data should be removed from the array.How can I achieve this?

HTML:

<div ng-repeat="data in filters.status" >
    <label class="Form-label--tick">
        <input type="checkbox" value="data.id" id="status" ng-model="status" class="Form-label-checkbox"  ng-change="IfCheck(data.id,status)" >
        <span class="Form-label-text"> {{data.status}}</span>
    </label>
</div>

Javascript:

<script>
    $scope.IfCheck = function (data, check) {
        if (check) {
            status.push(data);
            $scope.checkedData[0].status = status;
        }
        else {
            var index = $scope.status.indexOf(data);
            $scope.status.splice(index);
        }

    };
</script>

• javascript
• angularjs

• upload your code on plunker – Upalr Commented Dec 14, 2015 at 11:41

2 Answers 2

This can be written as like this:

var app = angular.module('sa', []);
app.controller('FooCtrl', function($scope) {
  $scope.ids = [];

  $scope.filters = [{
    id: 1,
    status: false
  }, {
    id: 2,
    status: false
  }, {
    id: 3,
    status: false
  }]

  $scope.IfCheck = function(id, check) {
    if (check) {
      $scope.ids.push(id);
    } else {
      var index = $scope.ids.indexOf(id);
      $scope.ids.splice(index, 1);
    }
  };
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooCtrl">
  <div ng-repeat="data in filters">
    <label class="Form-label--tick">
      <input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.id, data.status)">
      <span class="Form-label-text"> {{data.status}}</span>
    </label>
  </div>

  Selected ids: {{ids}}
</div>

You can utilize the ng-model to see if the input is checked or unchecked. Note that I simplified the code, so you will need to add in your various attributes and logic to what's below:

HTML:

<input type="checkbox" ng-model="isChecked" ng-change="IfCheck()">

JS:

$scope.isChecked = false;

$scope.IfCheck = function () {
  if ($scope.isChecked === true) {
    // checked
  } else {
    // unchecked
  }
};

This is the example plnkr for a checkbox input with ng-model that is on the Angular documentation.

For multiple checkboxes, you will need to track something like isChecked for each checkbox.