Question

我正在使用xeditable来编辑角度js中的表格行。 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>

我想更新＆＃39;拆分＆＃39;当＆amp; billAmt＆＃39;中的值时，最后一列中的值变化。所以我在angularjs中添加了一个手表，但没有更新。

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

使用xeditable时还有其他方法可以添加手表吗？我该如何解决这个问题？

Answer 1

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

<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中的可编辑行添加监视

1 个答案: