javascript - 如何使 Angular 仅影响同一行的模型和范围

Question

我正在制作一个应用程序，用户选择一个商品，然后它将显示该商品的价格，并且用户需要输入数量，我希望我的表单在用户输入后自动显示总计(数量*价格)数量。现在我如何使我的 Angular 仅显示该行的总计，我当前在下面所做的操作将更改所有行并乘以所有行的所有价格。

我希望总计列仅显示同一行输入的总价*数量。

js

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
    $scope.price = $('.price').text();
    $scope.qty = 0;
});

html

<div class='container' ng-app='myApp'>
    <table ng-controller='myCtrl'>
        <tr>
            <td><input type='text' class='qty' ng-model='qty'></td>
            <td><div class='price'></td>
            <td><div class='total'>{{ qty * price }}</td>
        </tr>
        <tr>
            <td><input type='text' class='qty' ng-model='qty'></td>
            <td><div class='price'></td>
            <td><div class='total'>{{ qty * price }}</td>
        </tr>
    </table>
</div>

因此，如果用户在第一行输入了数量，则总数应仅在第一行发生变化(数量 * 价格)。

Answer 1

如果您的数据(数量、价格)如下所示:

$scope.items = [{
    "qty": 5,
    "price": 38
}, {
    "qty": 3,
    "price": 22
}, {
    "qty": 1,
    "price": 12
}];

您可以使用ng-repeat循环显示它:

<tr ng-repeat="i in items">
  <td>{{i.qty}}</td>
  <td>{{i.price}}</td>
  <td>{{i.qty * i.price}}</td>
</tr>

Here is a demo on JSFiddle