Question

我有一个包含列的表，我需要在表更改事件的其他单元格上计算值。我想用ng-change做这个，所以立即看到变化。问题是，我不知道如何正确使用ng-model - 如果在一行中使用，它将在所有行中使用，因此每行都会重新计算，这是我不想要的。我当时只想更新一行。

Angular要求ng-model，其中使用ng-change。如何正确使用ng-change，表中有多行？

我可以使用jQuery onchange事件执行此操作，但我已经在HTML上有控制器，所以我想以角度完成所有操作。

其中一行的示例：

        <tr class="jtable-data-row jtable-row-even" 
data-record-key="110000001"><td>110000001</td>
            <td><input type="text" 
    ng-change="RecalculateValues($event);" ng-model="Quantity" value="1"></td>
            <td><input type="text"
    ng-change="RecalculateValues($event);" ng-model="Bruto" value="7.15"></td>
            <td><input type="text"
    ng-change="RecalculateValues($event);" ng-model="Neto" class="cellContent" class="cellContent" value="17"></td>
            </tr>

编辑：

Plunker这里显示我的问题 - 虽然ng-change事件连接到输入值，但未更新单元格。

Answer 1

你的做法是错误的。

示例：

<tr>
  <td>{{total}}</td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate()" ng-model="bruto">
  </td>
</tr>

控制器：

$scope.quantity = 1;
$scope.bruto = 7.5;
$scope.total = 0;

$scope.calculate = function() {
  $scope.total = $scope.quantity * $scope.bruto;
}

$scope.calculate();

如果你有多个表行，你需要有一个对象数组，每个对象包含一个数量和bruto以及一个总数。

<tr ng-repeat="n in valuesArray">
  <td>{{n.total}}</td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.quantity">
  </td>
  <td>
    <input type="text" ng-change="calculate($index)" ng-model="n.bruto">
  </td>
</tr>

控制器：

$scope.valuesArray = [
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
  {quantity: 1, bruto: 7.5, total: 0},
];

$scope.calculate = function(index) {
  $scope.valuesArray[index].total = $scope.valuesArray[index].quantity * $scope.valuesArray[index].bruto;
}

Answer 2

您缺少应用初始化。所以改变的方法永远不会被触发。

请添加<body ng-app="myApp">

表格单元格上的ng-change更新所有单元格

2 个答案: