When the checkAll checkbox is clicked, transfer its elements to a new array object and delete them from the original array

Question

When the checkAll checkbox is clicked, transfer its elements to a new array object and delete them from the original array

I am looking to add a new functionality where clicking on the "select All" checkbox will move the selected items to a new array and remove them from the current one.

Although I tried using the splice function, I was unsuccessful in deleting all items from the first table.

Please help Here is a sample plnkr that I have put together. When I click on "select All" in the first table, I want all its items to be added to the "New Table" and simultaneously removed from the "First Table (named Old Table)

javascript arrays angularjs

Answer 1

Answer №1

By utilizing the pushlist function in your code, you can effectively clear the array and populate it with all entries stored in $scope.merged.

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

Answer 2

By utilizing the pushlist function in your code, you can effectively clear the array and populate it with all entries stored in $scope.merged.

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

Answer 3

Answer №2

Utilize angular.copy in order to create a duplicate 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

Answer 4

Utilize angular.copy in order to create a duplicate 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>

When the checkAll checkbox is clicked, transfer its elements to a new array object and delete them from the original array

Answer №1

Answer №2

Fiddle Demo

Similar questions

What is the method for invoking a component with an event in Vuetify?

Using Javascript to enable a button to perform multiple actions on an element

Adjusting a parameter according to the width of the browser window?

Calculate the UV coordinates for a trio of CSG meshes

Iceweasel 31.2 is having trouble executing basic CSS code

Why is AngularJS displaying the markers instead of the routes on Google Maps?

When using a for loop in HTML5 Canvas, the result of the toDataURL function will consistently remain

The best way to upload a file using the blueimp file upload plugin in a single attempt

Node.js user update complete

JavaScript countdown timers should maintain their progress even after the page is reloaded

The initial output of the object yields an undefined value

Is it possible to customize the mounting element of NextJS or apply additional classes to the __next div?

The jsonData fails to display on the console without any errors, it simply refuses to print

Safari IOS causing issues with Vue 2.6 functionality

Unlocking the potential of promises in AngularJS

Saving data from an AJAX POST request using XMLHttpRequest in JavaScript and PHP to a text file is causing

Is it possible to incorporate a React app as a component within a static HTML page?

Is there a way for me to identify a click within a region where a jQuery plugin is already actively monitoring clicks?

Adjust the color of the input range slider using javascript

Dot/Bracket Notation: flexible key assignments