current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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.

share|improve this question
    
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 Aug 27 '15 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. – SAM Aug 27 '15 at 16:09
up vote 0 down vote accepted

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>

share|improve this answer
    
Thanks cubbuk. This solution works if we want to use a different array to store the checked values. – SAM Aug 28 '15 at 13:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.