如何使用 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}} 返回

[
  {
    "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 调用这两个计算函数