Question

我有三个产品详细信息，总价位于底部。如果用户更改了一个项目的数量，则应更新总价格。

我有

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

Total Price: $XXXX.XX

我使用循环获得上述div。

当用户更改三者中的任何一个时，我需要更新总价并显示在下面。

假设：

DIV1 has price $10 qty 1
DIV2 has price $20 qty 1
DIV3 has price $30 qty 1

总额为60美元

如果用户将DIV2的数量更改为3，那么我需要将总数改为$ 100

如何在AngularJS中执行此操作？

Answer 1

虽然再次遍历所有项目可能效率很低，但如果您不关心它，可以考虑以下方法。

尝试为项目制作自定义过滤器：

E.g。把它放在你的JavaScript中：

yourApp.filter('totalPrice', function() {
    return function(items) {
        var total = 0;

        // iterate through all the items to sum the price
        angular.forEach(items, function(item) {
            total += item.qty * item.price;
        }.bind(this));

        return total;
    };
});

然后在模板内的总价格div中使用该过滤器：

<div>
    Total Price: {{ items | totalPrice }}
</div>

您可以在该过滤器定义中进行所需的任何格式设置（例如，添加美元符号，逗号等）。

Answer 2

以下是您的问题DEMO。我使用android:targetSdkVersion="23"将您的多个div重构为单个div并跟踪我使用ng-repeat重新计算价格的数量变化每次数量变化。

在HTML中

ng-change

在JS中

<body ng-controller="dobController">
     <div ng-repeat="item in items track by $index">
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-change="updatePrice()" 
 ng-model="item.qty"></p>
</div>
Total Price is {{totalPrice}}
  </body>

希望这有助于解决您的问题。

AngularJS从多个文本框值

2 个答案: