对表单元格的Ng-change更新所有单元格
ng-change on a table cell updates all cells
我有一个列表,我需要在表更改事件上计算其他单元格的值。我想用ng-change来做这件事,这样可以立即看到变化。问题是,我不知道如何正确使用ng-model——如果在一行中使用,它将在所有行中使用,所以每一行都要重新计算,这是我不想要的。我想每次只更新一行。
Angular需要ng-model,其中使用了ng-change。如何正确使用ng-change,在表中有几行?
我可以用jQuery的onchange事件来做这件事,但是我已经在HTML上有了控制器,所以我想在angular中做所有的事情。
其中一行的示例:
<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事件连接到输入值。
你做错了。
的例子:
<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和total。
<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;
}
您缺少应用程序初始化。所以方法上的变化永远不会被触发。
请添加<body ng-app="myApp">
相关文章:
- 传递单元格值以便使用ajax post更新表
- 在动态表格单元格跨度中单击时更新一个权重值
- 更新单元格矩阵中的数据
- 如何在更改一列时更新HTML表行中的单元格
- 剑道UI网格更新仅更改了单元格/列
- JQuery 更新表单元格并添加新的表行
- jQuery 更改单元格类并更新数据
- Jquery 数据表更新单元格文本值和颜色
- 更新其中一个数据表单元格的多个下拉值的最佳方法是什么
- 如何使用来自另一个单元格的 onChange 事件更新一个单元格
- 具有特定单元格数据更新的实时网格(JavaScript/jQuery)
- PHP更新单元格数据错误
- jquery搜索表单元格->更新相邻小区
- 如何使用jquery更新HTML表格单元格
- 更新Handontable中的特定单元格
- 添加新的行实例,无法更新单元格原始值
- 剑道-在选择网格单元格时更新另一个网格(mvvm)
- 对表单元格的Ng-change更新所有单元格
- Ext JS 4: GridPanel -基于更新的单元格更新列单元格值
- HTML/JS从另一个表单元格更新一个表单元