Form array of objects when checking the checkbox angularjs

Question

$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

Okay, and what have you tried for this? How do you ng-repeat in your HTML? Please post the relevant code. — 31piy
– 31piy, Commented May 29, 2018 at 4:57
How have you set up the ng-model for those checkboxes? Always provide a minimal reproducible example — charlietfl
– charlietfl, Commented May 29, 2018 at 4:58
That site can't be reached :( . Provide your tried code in snippet — Ramesh Rajendran
– Ramesh Rajendran, Commented May 29, 2018 at 5:10

Saeed · Accepted Answer · 2018-05-29 05:22:27Z

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>

Akhil Aravind · Accepted Answer · 2018-05-29 05:28:27Z

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)         
      }
    }    
  }

Collectives™ on Stack Overflow

Form array of objects when checking the checkbox angularjs

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