CODEWITHSUNDEEP
javascriptarraysangularjs
random
random

Reputation: 7891

On click of checkAll checkbox, push its objects in another array object and remove from existing array

Functionality I want to implement is that when I click on "select All" checkbox, I want to push the selected item in new array and delete from current one.

Tried with splice function, but not able to delete all items from the first table.

enter code hereHere is the sample plnkr I have created, So when I click on "select All" from first table, all its items should get pushed in "New Table" and at the same time removed from "First table(named Old table)

Upvotes: 0

Views: 69

Answers (2)

David H.
David H.

Reputation: 507

This will clear your array and push all entries in $scope.merged 

$scope.pushlist = function(data){
    for(var item of data){
        $scope.merged.push({"name":item.name});
    }
    data.length=0
};

Upvotes: 1

Rayon
Rayon

Reputation: 36609

Use angular.copy to make an copy of the object

var app = angular.module("myApp", []);

app.controller("SecondCtrl", function($scope) {
  $scope.merged = [];
  $scope.data = [{
    "name": "ABC",
    "selected": false
  }, {
    "name": "HJK",
    "selected": false
  }, {
    "name": "PQR",
    "selected": false
  }, {
    "name": "LMN",
    "selected": false
  }];

  $scope.selectall = function(checkAll) {
    if (checkAll) {
      $scope.merged = angular.copy($scope.data);
      $scope.data.length = 0;
    } else {
      $scope.data = angular.copy($scope.merged);
      $scope.merged.length = 0;
    }
  };
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" ng-controller="SecondCtrl">
  <div>
    <h1>Old Table</h1>
    <table>
      <thead>
        <th>
          <input type="checkbox" ng-click="selectall(checkAll)" ng-model="checkAll">Select All</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr ng-repeat="item in data">
          <td>
            <input type="checkbox" ng-model="item.selected">
          </td>

          <td>{{item.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
  <div>
    <h2>New Table</h2>
    <table ng-show="merged">
      <thead>
        <th>Name</th>
      </thead>
      <tbody>
        <tr ng-repeat="item in merged">
          <td>{{item.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Fiddle Demo

Upvotes: 0

Related Questions