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

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

当我不使用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>

---

因此，当我在“prix”输入中输入一个数字时，我希望“tps”和“tvq”自动计算。我想知道是怎么回事。

在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>

说明
大奖赛
TPS
TVQ
总计
这就是我要找的！感谢您查看我的更新以获得更多的简单性：）太好了，我喜欢这种方式，更干净的视图！
<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>