テーブル内のカラム値を変更するのに$ watchを使うにはどうすればいいですか

Question

私のプロジェクトでは、テーブルに2つのカラムがあります。

私が望むのは、「非受信数量」列では、値を変更すると「受注数量」列に応じて有効になります。最初の行 - 非受信数量は4です。私はそれを3に減らし、注文数量は7から6になります。非受信数量を4から5に増やすと、注文数量は7から8になります。 私はangularjs $ watchを使ってどうすればいいですか？ マイコード：私は/ this--

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

のような何かをしたいどのような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; 
       } 
      }); 

     } 

を入力コントローラーのデータで私の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> 

で

Answer 1

これは、私たちがプロジェクトで使用している種類の構造です。

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

これは、2つの値をリンクする必要があります。私はこのbtwをテストしておらず、それをかなり最近行ったことの記憶から取っています。

編集：これをコンストラクタ内に配置すると、2行目は 'vm'ではなく 'this'にする必要があります。