Check, uncheck items of checkbox in an array angularjs javascript

Question

I have an array named namesData that I am showing on the UI. By default the checkboxes should be checked. When a checkbox is unchecked, that item should get removed from namesData. If the checkbox is checked, it should get added back to namesData.

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}]

html:

<div ng-repeat="namesList in namesData">
        <input type="checkbox" ng-model="nameItem[$index].checked" ng-change="nameChange(namesList, nameItem[$index].checked, 'nameObj'+ $index, $index)" ng-checked="nameItem.checked" name="nameObj" id="{{'nameObj'+$index}}"/>&nbsp;
        <span>{{namesList.name}}</span>

Controller:

$scope.namesData = [{"name":"abc.txt"}, {"name":"xyz.txt"}];
$scope.nameItem.checked = true;

$scope.nameChange = function(list, isChecked, id, itemNum){
    if (isChecked){
        $scope.namesData.push(list);
    }
    else
        $scope.namesData.splice($scope.newNamesList.indexOf(list), 1);
};

Issue: The problem with the above logic is that the checked/unchecked items are getting added/removed to the end of the namesData array rather than its actual index item. Please advise how to resolve this.

code to remove looks fine. Add may have issues. Are you certain that remove also removes the last element instead of the one specified in the index? — callmekatootie
– callmekatootie, Commented Aug 27, 2015 at 16:01
If I am checking/unchecking abc.txt, the logic is pushing/removing abc.txt again in namesData rather than working with abc.txt that is already there in the array. — Mustang
– Mustang, Commented Aug 27, 2015 at 16:09

cubbuk · Accepted Answer · 2015-08-27 16:11:10Z

0

If you need to submit only the checked items, how about using a logic similar to below one. You filter the checked items from your array and work with them. If you really need to modify the original array you have to keep a copy of the original array and insert checked items to its position by checking the original array.

angular.module("myApp", []).controller("myCtrl", function($scope) {

  $scope.namesData = [{
    name: "abc.txt",
    checked: true
  }, {
    name: "xyz.txt",
    checked: true
  }];
  $scope.nameItem = {
    checked: true
  };


  $scope.submit = function() {
    $scope.selectedList = $scope.namesData.filter(function(namesDataItem) {
      return namesDataItem.checked;
    });
    console.log($scope.selectedList);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">

<body ng-controller="myCtrl">
  <div ng-repeat="namesList in namesData">
    <input type="checkbox" ng-model="namesList.checked" />&nbsp;
    <span>{{namesList.name}}</span>
  </div>
  <button ng-click=submit()>Submit</button>
  <div ng-repeat="selected in selectedList">
    {{selected.name}}
    </div>
</body>

</html>

answered Aug 27, 2015 at 16:11

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mustang Over a year ago

Thanks cubbuk. This solution works if we want to use a different array to store the checked values.

Collectives™ on Stack Overflow

Check, uncheck items of checkbox in an array angularjs javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related