如何使用 ng-repeat 为 AngularJs 中的嵌套对象属性计算动态值

Question

我想计算与价格相对应的用户输入相关的税费。

我不用ng-repeat的时候没问题。但我不知道如何让它与 ng-repeat 一起工作。有关信息，下面的代码指的是我向发票添加项目的发票控制器。

这是我的：

控制器

App.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {


    $scope.factureId = $stateParams.factureId;


    Facture.get({ id: $stateParams.factureId }, function(data) {
        $scope.facture = data;

        $scope.ajouterItem = function(){
         $scope.facture.items.push({});
        }

    });

    $scope.calculTps = function() {
        $scope.item.tps = $scope.item.prix*5/100;
    };
    $scope.calculTvq = function() {
        $scope.item.tvq = $scope.item.prix*9.975/100;
    };
    $scope.calculGrandTotal = function() {
        $scope.item.grandtotal = parseFloat($scope.item.prix)+parseFloat($scope.item.tps)+parseFloat($scope.item.tvq);
    };
});

这是我的 HTML 文件

<table class="table">
<thead>
    <tr>
        <th><strong>Description</strong></th>
        <th class="text-right"><strong>Prix</strong></th>
        <th class="text-right"><strong>TPS</strong></th>
        <th class="text-right"><strong>TVQ</strong></th>
        <th class="text-right"><strong>Grand Total</strong></th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in facture.items">
        <td class="bold" width="50%">
            <input type="text" class="form-control" name="description" id="description" ng-model="item.description"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="prix" id="prix" ng-model="item.prix"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="tps" id="tps" ng-model="item.tps" value="{{calculTps()}}"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="tvq" id="tvq" ng-model="item.tvq" value="{{calculTvq()}}"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="grandtotal" id="grandtotal" ng-model="item.grandtotal" value="{{calculGrandTotal()}}">
        </td>
    </tr>
    <tr>
        <td class="bold"></td>
        <td class="text-right"></td>
        <td class="text-right"></td>
        <td class="text-right"></td>
        <td class="text-right">Grand Total</td>
    </tr>
</tbody>
</table>

这就是{{facture.items | json}} returns

[
  {
    "id": 1,
    "facture_id": 10200,
    "description": "Item numéro 1",
    "prix": "15.00",
    "tps": "0.75",
    "tvq": "1.50",
    "grandtotal": "17.25",
    "created_at": "2015-02-21 15:07:18",
    "updated_at": "2015-02-21 15:07:18"
  },
  {
    "id": 2,
    "facture_id": 10200,
    "description": "Deuxième item quoi",
    "prix": "135.00",
    "tps": "6.75",
    "tvq": "13.47",
    "grandtotal": "155.22",
    "created_at": "2015-02-21 15:07:18",
    "updated_at": "2015-02-21 15:07:18"
  }
]

所以，当我在 "prix" 输入中输入数字时，我希望 "tps" 和 "tvq" 自动计算。请问怎么了。

Answer 1

在您的 javascript 中，您仍然需要引用 'item' 作为 'facture' 数组的一部分。控制器不知道“$scope.item”是什么。您可以使用“$index”调用一个函数，该函数将为数组中的每个元素进行计算。

    App.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {


    $scope.factureId = $stateParams.factureId;


    Facture.get({ id: $stateParams.factureId }, function(data) {
        $scope.facture = data;

        $scope.ajouterItem = function(){
         $scope.facture.items.push({});
        }

    });

    $scope.calculTps = function(i) {
        $scope.facture.items[i].tps = $scope.facture.items[i].prix*5/100;
    };

    $scope.calculTvq = function(i) {
        $scope.facture.items[i].tvq = $scope.facture.items[i].prix*9.975/100;
    };

    $scope.calculGrandTotal = function(i) {
        $scope.facture.items[i].grandtotal = parseFloat($scope.facture.items[i].prix)+parseFloat($scope.facture.items[i].tps)+parseFloat($scope.facture.items[i].tvq);
    };

    $scope.doCalculations = function(i) {
        $scope.calculTvq(i);
        $scope.calculTps(i);
        $scope.calculGrandTotal(i);
    }
});

和你的HTML

<table class="table">
<thead>
    <tr>
        <th><strong>Description</strong></th>
        <th class="text-right"><strong>Prix</strong></th>
        <th class="text-right"><strong>TPS</strong></th>
        <th class="text-right"><strong>TVQ</strong></th>
        <th class="text-right"><strong>Grand Total</strong></th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in facture.items">
        <td class="bold" width="50%">
            <input type="text" class="form-control" name="description" id="description" ng-model="item.description"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="prix" id="prix" ng-model="item.prix" ng-change="doCalculations($index)></td>
        <td class="text-right">
            <input type="text" class="form-control" name="tps" id="tps" ng-model="item.tps"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="tvq" id="tvq" ng-model="item.tvq"></td>
        <td class="text-right">
            <input type="text" class="form-control" name="grandtotal" id="grandtotal" ng-model="item.grandtotal">
        </td>
    </tr>
    <tr>
        <td class="bold"></td>
        <td class="text-right"></td>
        <td class="text-right"></td>
        <td class="text-right"></td>
        <td class="text-right">Grand Total</td>
    </tr>
</tbody>
</table>

https://docs.angularjs.org/api/ng/directive/ngRepeat https://docs.angularjs.org/api/ng/directive/ngChange

更新：

您还应该在每次 'prix' 更新时使用 ngChange 调用两个计算函数

如何使用 ng-repeat 为 AngularJs 中的嵌套对象属性计算动态值

How to calculate a dynamic value with ng-repeat for a nested object property in AngularJs

angularjs

angularjs-ng-repeat

angular-ngmodel

如何使用 ng-repeat 为 AngularJs 中的嵌套对象 属性 计算动态值

How to calculate a dynamic value with ng-repeat for a nested object property in AngularJs

angularjs

angularjs-ng-repeat

angular-ngmodel

如何使用 ng-repeat 为 AngularJs 中的嵌套对象属性计算动态值