up vote 0 down vote favorite 

$scope.data = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
        }, {
            'id': '2',
            'itemName': 'keyboard',
            'price': '20'
        }, {
            'id': '3',
            'itemName': 'charger',
            'price': '20'
        }]

$scope.checkedTrue = function(h) {
            $scope.demoArr = [];
            $scope.demo = [];
            $scope.demoArr.push(h);

            function check() {

                var deee = $.grep($scope.demoArr, function(record) {
                    console.log('iijjdkkdkkdkd======>', record);

                    return record
                });

                $scope.checkDemo = deee;
            }
            check();
            $scope.demo.push($scope.checkDemo);
        };
<table class="table m-t-30">
  <thead>
    <tr>
      <th>#</th>
      <th>ItemName {{selected}}</th>
      <th>ItemPrice</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="tic in data track by $index">
      <td>
        <input id="checkbox2" type="checkbox" ng-model="selected[tic.id]" ng-change="checkedTrue(tic)"/>
      </td>
      <td><span>{{tic.itemName}}</span></td>
      <td><span>{{tic.price}}</span></td>
    </tr>
  </tbody>
</table>

I have this total array in ng-repeat:

var data = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
        }, {
            'id': '2',
            'itemName': 'keyboard',
            'price': '20'
        }, {
            'id': '3',
            'itemName': 'charger',
            'price': '20'
        }];

So i have check boxes in each row, so if user check the checkbox i need that particular checked row object and to form as array

For example:

Checked only object data in to another array

var Checked = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
         },{
        'id': '3',
        'itemName': 'charger',
        'price': '20'
    }];

If user uncheck i want to remove the object from Checked array

If it again check then that object again added to Checked array

share|improve this question
up vote 3 down vote accepted

1- Use ng-click and trigger a function

2- Create an array of checked checkboxes

3- When ever any checkbox changed, Check the array for existence of item and add or remove it from array

A simple example here

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.data = [{
      id: "1",
      itemName: "mousepad",
      price: "20"
    },
    {
      id: "2",
      itemName: "keyboard",
      price: "20"
    },
    {
      id: "3",
      itemName: "charger",
      price: "20"
    }
  ];
  $scope.tempModel = '';
  $scope.checkedArray = [];

  $scope.updateCheckArray = function(itm) {
    let index = $scope.checkedArray.findIndex(function(r) {
      return r.id == itm.id;
    });
    if (index == -1) {
      $scope.checkedArray.push(itm);
    } else {
      $scope.checkedArray.splice(index, 1);
    }
  };
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <hr>
    <div class="post-content" ng-repeat="d in data">
      <input ng-click="updateCheckArray(d)" type="checkbox" ng-model="tempModel" />{{d.itemName}}
      <hr>
    </div>

    {{checkedArray}}

  </div>
</body>

</html>

Update

1- Change function body to this

  $scope.checkedTrue = function(itm) {
    let index = $scope.checkedArray.findIndex(function(r) {
      return r.id == itm.id;
    });
    if (index == -1) {
      $scope.checkedArray.push(itm);
    } else {
      $scope.checkedArray.splice(index, 1);
    }
  };

2- Add an empty array for selected and an empty model

$scope.tempModel = "";
$scope.checkedArray = [];

Changes for your own code:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.data = [{
      id: "1",
      itemName: "mousepad",
      price: "20"
    },
    {
      id: "2",
      itemName: "keyboard",
      price: "20"
    },
    {
      id: "3",
      itemName: "charger",
      price: "20"
    }
  ];
  $scope.tempModel = "";
  $scope.checkedArray = [];

  $scope.checkedTrue = function(itm) {
    let index = $scope.checkedArray.findIndex(function(r) {
      return r.id == itm.id;
    });
    if (index == -1) {
      $scope.checkedArray.push(itm);
    } else {
      $scope.checkedArray.splice(index, 1);
    }
  };
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <hr>
    <table class="table m-t-30">
      <thead>
        <tr>
          <th>#</th>
          <th>ItemName {{selected}}</th>
          <th>ItemPrice</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="tic in data track by $index">
          <td>
            <input id="checkbox2" type="checkbox" ng-model="tempModel" ng-change="checkedTrue(tic)" />
          </td>
          <td><span>{{tic.itemName}}</span></td>
          <td><span>{{tic.price}}</span></td>
        </tr>
      </tbody>
    </table>

    {{checkedArray}}

  </div>
</body>

</html>

share|improve this answer
up vote 0 down vote

You can check the fiddler, i have implemented what you need

Fiddle

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <ul>
      <li ng-repeat="item in data">
        <input type="checkbox" value="{{item.id}}" ng-click="addTo($event)">
        {{item.itemName}}
      </li>
    </ul>
    <br>
    <h4>
    Added Array
    </h4>
    {{itemArray}}
  </div>
</div>

function TodoCtrl($scope) {
  $scope.data = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
        }, {
            'id': '2',
            'itemName': 'keyboard',
            'price': '20'
        }, {
            'id': '3',
            'itemName': 'charger',
            'price': '20'
        }];
     $scope.itemArray = [];   
    $scope.addTo = function(event){
        if(event.currentTarget.checked){
            $scope.itemArray.push(this.item)
      }else{
                $scope.itemArray.pop(this.item)         
      }
    }    
  }
share|improve this answer

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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