在 AngularJS 中向 Json 数组添加函数

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;
});

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