Ctrl & Factory + mock data

Simple controller and factory

by AUX Coder

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/0.9.6/q.js"></script>
<div class="container" ng-controller="myCtrl">
  <h3>Table A</h3>
  <table class="table">
    <tbody>
      <tr>
        <th>Action</th>
        <th>Code</th>
        <th>Name</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total</th>
      </tr>
      <tr ng-repeat="prod in dataA">
        <td><button class="btn btn-danger" ng-click="move('B', prod, $index)">Move to B</button></td>
        <td>{{prod.code}}</td>
        <td>{{prod.name}}</td>
        <td>{{prod.price}}</td>
        <td><input type="number" ng-model="prod.qty" class="form-control" style="width: 30px" ng-change="onChange(dataA, prod)"/></td>
        <td class="text-right"><strong>{{prod.total|currency: '$'}}</strong></td>
      </tr>
    </tbody>
  </table>
  <hr/>
  <h3>Table B</h3>
  <table class="table">
    <tbody>
      <tr>
        <th>Action</th>
        <th>Code</th>
        <th>Name</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total</th>
      </tr>
      <tr ng-repeat="prod in dataB">
        <td><button class="btn btn-danger" ng-click="move('A', prod, $index)">Move to A</button></td>
        <td>{{prod.code}}</td>
        <td>{{prod.name}}</td>
        <td>{{prod.price}}</td>
        <td><input type="number" ng-model="prod.qty" class="form-control" style="width: 30px" ng-change="onChange(dataB, prod)"/></td>
        <td class="text-right"><strong>{{prod.total|currency: '$'}}</strong></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

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

app.controller('myCtrl', myCtrl);

function myCtrl($scope, $log) {
	$scope.dataA = [{
    id: 1,
    code: 'A',
    name: "Table",
    price: 43.5,
    qty: 1,
    total: 43.5
  }, {
    id: 2,
    code: 'B',
    name: "Lamp",
    price: 100.00,
    qty: 1,
    total: 100.00
  }];
  
  $scope.dataB = [];
  
  $scope.onChange = function(collection, item){
  	collection.forEach(function(prod){
    	if(prod.id === item.id){
      	prod.total = prod.qty * prod.price;
      }
    });
  }
  
  $scope.move = function(tableID, item, idx){
    if(tableID === 'A'){
			$scope.dataA.push(item);
      $scope.dataB.splice(idx, 1);
    }
    if(tableID === 'B'){
			$scope.dataB.push(item);
      $scope.dataA.splice(idx, 1);
    }
  }

}