为什么我不能在 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中，我从输入字段和settinf获取所有详细信息到对象产品，然后将其推送到数组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));
        }

我尝试控制台.log在控制台中记录 newProducts 数组，它正在用新数组更新，但没有显示在第二个表中。请帮忙！

Answer 1

使用角度复制。角度$scopes是双向绑定的。当您推送双向绑定的 $scope.prod 时，您在第一个表中所做的更改将反映在第二个表中。

Answer 2

使用$scope可能非常棘手。我不是 Angular 中最好的，但我不知道

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

如果您在此处使用函数的$scope或控制器的$scope。

在控制器的最顶部输入"var vm=$scope"，并在html中使用"Controller as vm"。

因此，如果您在那里，我们可以查看问题是否仍然存在。

Answer 3

角度变量是引用类型。所以你可以使用 angular.copy(( 来解决这个问题。在代码下方。

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

希望对您有所帮助，谢谢。