angularjs - 如何使用 $watch 更改表中的列值

Question

在我的项目中 - 我在一个表格中有两列。你可以在下图中看到。

我想要的是——在“非接收数量”列中，如果我更改一些值，它将相应地影响“订单数量”列。例如，在第一行——非接收数量为 4，如果我将其减少到 3订单数量将从 7 变为 6。如果我将非接收数量从 4 增加到 5，那么订单数量将从 7 变为 8。 我如何使用 angularjs $watch 做到这一点？ 我的代码： 在我的 html 中——

<table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Procuct Code</th>
                            <th>Product Name</th>
                            <th>Description</th>
                            <th>Unit Price</th>
                            <th>Order Quantity</th>
                            <th>Non Receive Quantity</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="pr in prodDetails">
                            <td>{{pr.PRODUCTCODE}}</td>
                            <td>{{pr.PRODUCTNAME}}</td>
                            <td>{{pr.DESCRIPTION}}</td>

                            <td>
                                <div ng-class="{ 'has-error' : poForm.unitprice{{$index}}.$invalid && submitted }">
                                    <input ng-model="pr.RATE" type="text" name="unitprice{{$index}}" ng-blur="getTotal(pr)" class="form-control input-sm" required />
                                </div>
                            </td>

                            <td>
                                <div ng-class="{ 'has-error' : poForm.poquantity{{$index}}.$invalid && submitted }">
                                    <input type="text" ng-model="pr.POQUANTITY" name="poquantity{{$index}}" ng-blur="getTotal(pr)" class="form-control input-sm" required readonly/>
                                </div>
                            </td>

                            <td>
                                <div ng-class="{ 'has-error' : poForm.quantity{{$index}}.$invalid && submitted }">
                                    <input type="text" ng-model="pr.QUANTITY" name="quantity{{$index}}" ng-blur="getTotal(pr)" class="form-control input-sm" ng-change="OrderQuantityChange(pr)" required />
                                </div>
                            </td>

                            <td>{{pr.TOTAL}}</td>
                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>Total Quantity: {{po.TOTORDERQTY}}</td>
                            <td>Total Price: {{po.TOTALPRICE}}</td>
                        </tr>
                    </tbody>
                </table>

在控制器数据中输入 prodDetails--

function prepareProdDetail(detailLst)
        {
            scope.prodDetails = [];
            //scope.prodDetailsCompare = [];
            scope.products.forEach(function (prod)
            {
                var selProd = Enumerable.From(detailLst).FirstOrDefault(null, function (x) {
                    return x.PRODUCTCODE == prod.PRODUCTCODE;
                });
                if (selProd != null) {
                    prod.isSelect = true;

                    scope.prodDetails.push(selProd);
                    //scope.prodDetailsCompare.push(selProd);
                }
                else
                {
                    prod.isSelect = false;
                }
            });

        }

我想做什么/类似的事情--

function OrderQuantityChange(row)
        {
            scope.$watch('row.POQUANTITY', function (newValue, oldValue) {
                row.QUANTITY = row.QUANTITY+(oldValue - newValue);
            });
        }

Answer 1

这是我们在项目中使用的那种结构。

scope.$watch('vm.param.property', (new, old) => {
  const partner = vm.param.otherProperty;
  partner.value = partner.value + (new - old);
});

那应该将您的两个价值观联系起来。顺便说一句，我还没有测试过这个，这是从最近做过的记忆中得出的。

编辑：如果你把它放在构造函数中，那么第二行需要是'this'而不是'vm'。