Why cannot I add new list in a table in angularJS 1.x?

Question

I have example code below where I am supposed to create a list of items.

 <div ng-hide="listTrigger">
                    <!--FIRST TABLE-->
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th sortable="code" class="sortable">
                                Product Name
                            </th>
                            <th sortable="placed" class="sortable">
                                Qty
                            </th>
                            <th class="st-sort-disable th-dropdown">
                                Price
                            </th>
                            <th sortable='total.value' class="sortable">
                                Split
                            </th>
                            <th>

                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr grid-item>
                            <td width="40%">
                                <select class="form-control" ng-model="prod.uid">
                                    <option selected disabled>Select Product</option>
                                    <option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option>
                                </select>
                            </td>
                            <td width="20%">
                                <input type="number" min="0" ng-model="prod.qty" class="form-control">

                            </td>
                            <td width="20%">
                                <input type="number" min="0" ng-model="prod.price" class="form-control">
                            </td>
                            <td width="10%">
                                <input type="number" min="1" max="100" ng-model="prod.split" class="form-control">
                            </td>
                            <td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td>
                        </tr>
                        </tbody>
                    </table>


     <!--SECOND TABLE-->
                    <table ng-show="newProducts.length!=0"  class="table">

                        <thead>
                        <tr>
                            <th  >
                                Product Name
                            </th>
                            <th  >
                                Qty
                            </th>
                            <th >
                                Price
                            </th>
                            <th >
                                Split
                            </th>
                            <th>

                            </th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr ng-repeat="newProduct in newProducts">
                            <td width="60%" ng-bind="newProduct.uid"></td>
                            <td width="10%" ng-bind="newProduct.qty"></td>
                            <td width="10%"ng-bind="newProduct.price"></td>
                            <td width="10%" ng-bind="newProduct.split"></td>
                            <td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td>
                        </tr>
                        </tbody>
                    </table>

Output but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list

In JS I am getting all details from input fields and settinf to an object prod and then pushing it in to an array newProducts. Later in the table I am using ng-repeat to repeat items in newProducts array. The top table and bottom table are connected in no other way and I cannot figure out why values are chaging in bottom table when they are changed in input fields. Also while trying to add it one more time, it throws an error.

jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D

Here is the JS to add new item

//function to add new product while creating
        $scope.addNewProduct= function(id){
            $scope.newProducts.push($scope.prod);
            console.log("product array-"+JSON.stringify( $scope.newProducts));

        }

I tried console.log to log newProducts array in console, it is getting updated with new array , but not showing up in second table. Please help!

Answer 1

Using $scope can be very tricky. I'm not the best in Angular but i have no idea

$scope.newProducts.push($scope.prod);

if you are using here the $scope of the function or the $scope of the Controller.

Put in at the very top of your Controller "var vm=$scope", and in your html use "Controller as vm".

So if you are then there, we can see if the problem still exists.

Answer 2

use angular copy. angular $scopes are two way binded.. the changes u make in first table will be reflected in second table as you are pushing $scope.prod which is two way binded.

Answer 3

Angular variables are reference type. So you can use angular.copy() to overcome from this issue. Below the code.

$scope.addNewProduct= function(id){
      var products = angular.copy($scope.prod);
      $scope.newProducts.push(products);
      console.log("product array-"+JSON.stringify( $scope.newProducts));
}

Hope it will help you thanks.