0

我在下面有示例代码，我应该在其中创建项目列表。

 <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 获取所有详细信息到对象 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 数组，它正在使用新数组进行更新，但未显示在第二个表中。请帮忙！

4

3 回答 3

1

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

于 2017-06-09T15:42:14.673 回答
0

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

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

希望对你有帮助谢谢。

于 2017-06-09T17:25:14.373 回答
0

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

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

如果您在这里使用函数的 $scope 或控​​制器的 $scope。

放入控制器“var vm=$scope”的最顶部，并在您的 html 中使用“Controller as vm”。

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

于 2017-06-09T15:13:21.270 回答