Push data on array when checkbox is checked and remove data when checkbox is unchecked

Question

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>

upload your code on plunker

Upalr
– Upalr

2015-12-14 11:41:59 +00:00
Commented Dec 14, 2015 at 11:41 — Upalr
– Upalr, Commented Dec 14, 2015 at 11:41

Shashank Agrawal · Accepted Answer · 2015-12-14 11:53:09Z

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.com/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>

boombox · Accepted Answer · 2015-12-14 11:55:02Z

2

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.

answered Dec 14, 2015 at 11:55

boombox

2,4562 gold badges14 silver badges16 bronze badges

Collectives™ on Stack Overflow

Push data on array when checkbox is checked and remove data when checkbox is unchecked

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