Question

我有从webapi返回的这个JSON对象，

[{name:John,val1:10,val2:20,val3:0},
{name:Jane,val1:50,val2:200,val3:0}]

我将此数组存储在“$ scope.dtArray”中，该数组使用ng-repeat绑定到UI（文本框）。在绑定发生之前，我想分配一个函数来添加值，如下所示

this.val3 = function() {return Number(this.val1) + Number(this.val2) };

表示数组中的每个对象。因此，当用户更改val1和val2文本框时，值会自动更改为val3。

以下是UI标记...

<div ng-repeat="cnt in dtArray track by $index">
    <table style="border-style: solid;">
        <tr>
            <td>
                <input type="text" ng-model="cnt.name">
                <input type="text" ng-model="cnt.val1">
                <input type="text" ng-model="cnt.val2">
                <input type="text" ng-model="cnt.val3()">
            </td>
        </tr>
    </table>
</div>

在val1或val2中更改值时不会调用该函数。

任何帮助都将不胜感激。

感谢。

Answer 1

尝试以下html代码而不是代码

<div ng-repeat="cnt in dtArray track by $index">
    <table style="border-style: solid;">
        <tr>
            <td>
                <input type="text" ng-model="cnt.name">
                <input type="text" ng-model="cnt.val1">
                <input type="text" ng-model="cnt.val2">
                <input type="text" ng-init="cnt.val3=val3(this)" ng-model="cnt.val3">
            </td>
        </tr>
    </table>
</div>

val3

也应使用$scope.functionName()函数

喜欢：

$scope.val3

请尝试使用以下代码代替您的代码

$scope.val3 = function(context) {return Number(context.val1) + Number(context.val2) };

Answer 2

您是否仍希望val3成为可编辑的输入？你可以这样做：

<input type="text" ng-model="cnt.name">
<input type="text" ng-model="cnt.val1">
<input type="text" ng-model="cnt.val2">
<input type="text" ng-model="cnt.val3">

在您的控制器中

$scope.$watch('(cnt.val1 || 0) + (cnt.val2 || 0)', function(total) {
  $scope.cnt.val3 = total;
});

这样，当val1或val2改变时，val3会更新，但也可以自行编辑。

在AngularJS中向Json数组添加函数

2 个答案: