Transferring data between tables in AngularJS

What is the best way to transfer table row data from one table to another using buttons?

Once the transfer is complete, how can I capture the key value of the items in the right side table by clicking a submit button?

Check out this link for reference: http://jsfiddle.net/A6bt3/111/

JavaScript:

var app = angular.module('myApp', []); 
function checkBoxCtrl($scope){ 
   $scope.tableOne=[
        {key: '1',  value: 'a'},
        {key: '2',  value: 'b'},
        {key: '3',  value: 'c'},
        {key: '4',  value: 'd'}
    ];  

    $scope.btnRight = function () {

    }
    $scope.btnAllRight = function () {

    }
    $scope.btnLeft = function () {

    }
    $scope.btnAllLeft = function () {

    } 
    $scope.submit = function () {

    } 
};

HTML:

     <span>Table One</span> 
     <div ng-controller="checkBoxCtrl">
     <table width="400" border="1">
     <tr ng-repeat="data in tableOne" id="item{{data.key}}">
        <td width="20px">
            <input type="checkbox" ng-model="data.checked">
        </td>
        <td>{{data.key}}</td>
        <td>{{data.value}}</td>
    </tr>
    </table>
    <br> 
      <div class="">
          <input id="btnRight" type="button" value=">" class="listBoxButton"  ng-click="btnRight()" />
          <br/>
          <input id="btnAllRight" type="button" value=">>"  class="listBoxButton"  ng-click="btnAllRight()" />
          <br/>
          <input id="btnAllLeft" type="button" value="<<" class="listBoxButton"  ng-click="btnAllLeft()" />
          <br/>
          <input id="btnLeft" type="button" value="<" class="listBoxButton" ng-click="btnLeft()" />
       </div>
       <span>Table Two</span> 
      <table width="400" border="1">
    <tr ng-repeat="data in tableOne | filter: {checked:true}">
        <td> <input type="checkbox" ng-model="data.checked"></td>
        <td>{{data.key}}</td>
        <td>{{data.value}}</td>
    </tr>
</table>
    <input id="sbt" type="button" value=">" class=""  ng-click="submit()" />
javascriptangularjs

Answer №1

Kindly review the comments below

html : The reference for your second table is now tableTwo, not tableone

<table width="400" border="1">
    <tr ng-repeat="data in tableTwo">
      <td>
        <input type="checkbox" ng-model="data.checked">
      </td>
      <td>{{data.key}}</td>
      <td>{{data.value}}</td>
    </tr>
  </table>

Script:

var app = angular.module('myApp', []);
function checkBoxCtrl($scope) {
    $scope.tableOne = [{
            key: '1',
            value: 'a'
        }, {
            key: '2',
            value: 'b'
        }, {
            key: '3',
            value: 'c'
        }, {
            key: '4',
            value: 'd'
        }
    ];
    $scope.tableTwo = [];//the table to be submitted
    function removeitems(tableRef) { //revmove items from tableRef
        var i;
        for (i = tableRef.length - 1; i >= 0; i -= 1) {
            if (tableRef[i].checked) {
                tableRef.splice(i, 1);
            }
        }
    }
    $scope.btnRight = function () {
       //Loop through tableone
        $scope.tableOne.forEach(function (item, i) {
           // if item is checked add to tabletwo
            if (item.checked) {
                $scope.tableTwo.push(item);
            }
        })
        removeitems($scope.tableOne);
    }
    $scope.btnAllRight = function () {
        $scope.tableOne.forEach(function (item, i) {
            item.checked = true;
            $scope.tableTwo.push(item);
        })
        removeitems($scope.tableOne);
    }
    $scope.btnLeft = function () {
        $scope.tableTwo.forEach(function (item, i) {
            if (item.checked) {
                $scope.tableOne.push(item);
            }
        })
        removeitems($scope.tableTwo);
    }
    $scope.btnAllLeft = function () {
        $scope.tableTwo.forEach(function (item, i) {
            item.checked = true;
            $scope.tableOne.push(item);
        })
        removeitems($scope.tableTwo);
    }
    $scope.submit = function () {
        alert(angular.toJson($scope.tableTwo))
    }
};

Answer №2

Your fiddle has been updated:

http://jsfiddle.net/y1zosxo6/2/

HTML:

    <span>Table One</span>

<div ng-controller="checkBoxCtrl">
    <table width="400" border="1">
        <tr ng-repeat="data in tableOne" id="item{{data.key}}">
            <td width="20px">
                <input type="checkbox" ng-model="data.checked">
            </td>
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
    </table>
    <br> 
    <div class="">
      <input id="btnRight" type="button" value=">" class="listBoxButton"  ng-click="btnRight()" />
                                        <br/>
      <input id="btnAllRight" type="button" value=">>"  class="listBoxButton"  ng-click="btnAllRight()" />
                                        <br/>
      <input id="btnAllLeft" type="button" value="<<" class="listBoxButton"  ng-click="btnAllLeft()" />
                                        <br/>
    <input id="btnLeft" type="button" value="<" class="listBoxButton" ng-click="btnLeft()" />
     </div>
<span>Table Two</span>

    <table width="400" border="1">
        <tr ng-repeat="data in table2 ">
            <td> <input type="checkbox" ></td>
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
    </table>

JS:

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

function checkBoxCtrl($scope){

    $scope.tableOne=[
                    {key: '1',  value: 'a'},
                    {key: '2',  value: 'b'},
                    {key: '3',  value: 'c'},
                    {key: '4',  value: 'd'}
                    ];  
          $scope.table2=[];

          $scope.btnRight = function () {

          }
           $scope.btnAllRight = function () {
            $scope.table2=$scope.tableOne;
            $scope.tableOne=[];
           }
            $scope.btnLeft = function () {

            }
           $scope.btnAllLeft = function () {
           $scope.tableOne=$scope.table2;
           $scope.table2=[];
           }


    };

However, I am unsure about the purpose of 'btnRight' and 'btnLeft'. Should they move the first item or last one on click?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to incorporating a controller into a directive during unit testing

Looking to test a custom AngularJS directive that has been defined this way: app.directive('myCustomer', function() { return { template: 'cust.html' controller: 'customerController' }; }); For the testi ...

angularjsunit-testingdependency-injectioncontrollerdirective

"In OSX, running the command 'npm install -g generator-angular-fullstack' will install the Angular Fullstack

As I attempted to configure the MEAN stack, I needed to install Angular. However, when I used the command "npm install -g generator-angular-fullstack", it resulted in an error message displaying in the terminal window. Please refer to the following image ...

javascriptangularjsnode.jsubuntu

JavaScript can be utilized to monitor outbound clicks effectively

I am currently working on implementing the code found at this link: Make a ping to a url without redirecting. The original poster is looking to ping a URL without opening multiple windows. My goal is to achieve the same functionality, but I also want to vi ...

javascriptphphtmlajaxhttp-redirect

Implementing Vue component loading asynchronously upon user click

I'm currently working on creating a component with nested components in Vue. The structure can be simplified as ParentComponent.vue | |__ ChildComponent.vue My goal is to load the ChildComponent only when a button is clicked using @click in the Pare ...

javascriptvue.js

The reason behind a loop being caused by an IF statement

Here is a snippet of code that I'm trying to understand: ReactDOM.render(<Change />, document.getElementById('app')); function Change() { const [i, setI] = React.useState(0); let rnd = 9; if (i !== rnd) { setTime ...

javascriptreactjs

Ways to configure several resolve statements in Angular's UI-router?

Is there a way to prevent the page from loading before the data is ready, avoiding the view updating while the page is still loading? I have been successful in using a 'resolve' in UI-router to run a method and fetch data before loading the page ...

javascriptangularjsangular-ui-router

Ways to mandate adjusting an option in <select> tag

Using the code $('select').change(function(){alert('changed');});, I am able to trigger an alert every time the option is changed. However, I also need to trigger the alert when the default option, which is the first one in the list, is ...

javascriptjqueryhtml

Using AngularJS to toggle between two select dropdowns

I have two drop-down lists containing JSON data. <select class="form control" ng-model="fruitsName" ng-options="r.id as r.name for r in fruits"> <option value="">--Select---</option></select> $scope.fruits = [{'id': &apo ...

javascriptjqueryangularjsselectdrop-down-menu

Breaking apart field values in React Final Form

In my react and redux application, I am using react final form with a 'cars' field that is a select. When the submit event is triggered, it should only return specific types like coupe: ['BMW'] instead of just the field name with values ...

javascriptreactjsreact-final-form

What is the best way to incorporate NoFollow attributes into the external links on my Weebly website?

It's frustrating that Weebly doesn't offer a way to make external links noFollow. After reaching out to them with no success, I took matters into my own hands and searched for a solution online. <script src='http://ajax.googleapis.com/aj ...

javascriptjqueryweebly

Tips for making nested sliding divs within a parent sliding div

Is it possible to slide a float type div inside another div like this example, but with a white box containing "apple" text sliding inside the black div it's in? I have attempted to recreate the effect using this example. Here is my current JavaScript ...

javascriptjquerycssdhtml

How can the execution of a directive within another directive's template be triggered?

Is there a way to declare a directive within another custom directive template? The goal is for the inner directive to utilize a field from the outer directive's scope: angular.module('core.directives') .directive('containertable&apos ...

angularjsangularjs-directiveng-grid

Learn how to utilize the getElementByClassName method in JavaScript to insert checkboxes into two lists that share the same class name

I have a situation where I have two lists sharing the same class name. I need to dynamically create checkboxes in both of these lists based on XML data. My current dilemma lies in how to properly utilize getElementByClassName in JavaScript to add checkbox ...

javascriptjqueryhtml

Change the field of view (FOV) of the Three.js camera according to

Is there a way to modify the standard Three.js resize code so that the scene scales with the DOM element's width as it does with the height? Currently, the scene scales in relation to the element's height, but when the width decreases, the model ...

javascriptthree.js

When using Selenium WebDriver to locate an object, an error may occur stating that the result of the xpath expression is "[object Text]" instead of an element as expected

I am currently utilizing Selenium to validate the existence of specific text within a web page. Here is an example of how the HTML appears. <html> <div class="a-content"> <!--!-->==$0 " Text to Locate" <b ...

javascriptseleniumselenium-webdriverxpath

Is there a way for me to retrieve the value associated with a specific key within this JSON object?

Looking to extract the error message from _body. My current method involves: console.log(message._body.error); Unfortunately, this returns undefined. If I try console.log(message._body); I receive "{"code":141,"error":"This phone number exists already ...

javascriptjson

I am looking to switch themes on the homepage using a button from an imported component

I have successfully created a toggle button on my main page in app.js to switch between dark and light themes. However, I am facing difficulty in putting the button inside my nav component and using it from that page imported in app.js. Can anyone guide me ...

javascriptreactjs

Guide on extracting latitude and longitude geocode from a JSON response using the Google Maps API and storing them in variables with JavaScript

RETRIEVING GEO LOCATION VIA JSON https://maps.googleapis.com/maps/api/geocode/json?address=KOLKATA&key=API_KEY { "results" : [ { "address_components" : [ { "long_name" : "Kolkata", ...

javascriptjsongoogle-mapsgoogle-maps-api-3

Difficulty displaying a 2D SVG in Three.js and WebGL

I am struggling to incorporate my own SVG illustration into a ThreeJS Scene that already contains a cat object and a cube. I have tried using resources like the CodePen (link included) and various Stack Overflow threads related to LegacySVG Loader, but I f ...

javascriptsvgcanvasthree.jswebgl

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Within my MVC3 application, I have implemented a feature to change the cursor when hovering over an element. Below is the JavaScript code that accomplishes this: $('#print').hover(function () { var cursorUrl = 'url(@Url.Content("~/Cont ...

javascripthtmlasp.net-mvc-3internet-explorergoogle-chrome