为 angularjs 中的可编辑行添加监视

Question

我正在使用 xeditable 在 angular js 中编辑 table 行。 HTML代码如下所示。

<tr ng-repeat="expense in viewModel.expenses">
<td>{{expense.eid}}</td>
<td><span editable-text="expense.billAmt" e-ng-model="editForm.billAmt" e-name="billAmt" e-form="rowform">{{expense.billAmt}}</span></td>
<td><span ng-show="!rowform.$visible">{{expense.split}}</span><input type="text" ng-show="rowform.$visible" class="form-control input-sm" e-ng-model="editForm.split" ng-disabled="true" /></td>

我想在 'billAmt' 中的值更改时更新最后一列中的 'split' 值。所以我在 angularjs 中添加了一个手表，但没有更新。

$scope.$watch('editForm.billAmt',function(newValue,oldValue) {
    $scope.editForm.split=newValue/$scope.viewModel.members.length;
});

在使用xeditable的同时，还有其他方法可以添加手表吗？？我该如何解决？

Answer 1

我会避免使用 $scope.$watch() 并转向更有效的解决方案。每次 billAmt 值更改时，您都可以使用 e-ng-change 指令来触发计算新值 $scope.editForm.split 的函数。它看起来像这样：

<tr ng-repeat="expense in viewModel.expenses">
<td>{{expense.eid}}</td>
<td><span editable-text="expense.billAmt" e-ng-model="editForm.billAmt" e-name="billAmt" e-form="rowform" e-ng-change="checkSplit();">{{expense.billAmt}}</span></td>
<td><span ng-show="!rowform.$visible">{{expense.split}}</span><input type="text" ng-show="rowform.$visible" class="form-control input-sm" e-ng-model="editForm.split" ng-disabled="true" /></td>

然后在你的控制器中添加函数 checkSplit():

$scope.checkSplit = function(){
    $scope.editForm.split = $scope.editForm.billAmt / $scope.viewModel.members.length;
}

checkSplit() 函数在值更改事件的响应中显式调用，而 $scope.$watch() 处理程序在每个摘要周期运行，因此您在技术上也可以节省一些性能。

为 angularjs 中的可编辑行添加监视

adding watch for an editable row in angularjs

watch

angularjs

x-editable