Почему я не могу добавить новый список в таблицу в angularJS 1.x?

Question

У меня есть пример кода ниже, где я должен создать список элементов.

 <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>

Вывод, но что бы я ни набрал в текстовом поле первой таблицы, происходит так же, как во второй таблице. Это должно прийти список за списком

В JS я получаю все детали из полей ввода и устанавливаю объект prod, а затем помещаю его в массив newProducts. Далее в таблице я использую ng-repeat, чтобы повторять элементы в массиве newProducts. Верхняя таблица и нижняя таблица никак не связаны между собой, и я не могу понять, почему значения изменяются в нижней таблице при их изменении в полях ввода. Также при попытке добавить его еще раз, он выдает ошибку.

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

Вот JS, чтобы добавить новый элемент

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

        }

Я попытался console.log для записи массива newProducts в консоли, он обновляется новым массивом, но не отображается во второй таблице. Пожалуйста помоги!

Answer 1

Используйте угловую копию. угловые $scopes связаны двухсторонним связыванием... изменения, которые вы сделаете в первой таблице, будут отражены во второй таблице, когда вы нажимаете $scope.prod, который связан двухсторонним связыванием.

Answer 2

Угловые переменные являются ссылочными. Таким образом, вы можете использовать angular.copy() для решения этой проблемы. Ниже код.

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

Надеюсь, это поможет вам, спасибо.

Answer 3

Использование $ scope может быть очень сложным. Я не лучший в Angular, но понятия не имею

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

если вы используете здесь $ scope функции или $ scope контроллера.

Поместите в самом верху вашего контроллера "var vm = $ scope", а в html используйте "Controller as vm".

Так что если вы там, мы можем увидеть, если проблема все еще существует.