Question

我需要你的帮助，我是angularJs的新手。我的问题是如何在表格中添加项目。这是我的index.html代码：

<div class="col-md-5">
<table class="table">
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr ng-repeat="product in products" class="quantity">
<td>{{product.name}}</td>
<td> <sapn class="plus-icon glyphicon glyphicon-minus" ng-click="minusOne($index)"></sapn>
{{product.quantity}}
<sapn class="minus-icon glyphicon glyphicon-plus" ng-click="plusOne($index)"></sapn>
</td>
<td>{{product.price }} </td>
<td>{{product.price * product.quantity}}</td>
</tr>
</table>
<span>Total: {{ getTotal() }}</span>
</br>
<button>first product</button>
<button>second product</button>
</div>

这是controller.js文件：

app.controller('MainController', ['$scope', function ($scope) {
    $scope.appName = 'diyetSahovatKafe';

    $scope.products = [
        {
            name: 'Обычный котлет',
            quantity: 0,
            price: 3500,
        }
    ];

    $scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.products.length; i++){
        var product = $scope.products[i];
        total += (product.price * product.quantity);
    }
    return total;
    }

    $scope.plusOne = function(index){
    $scope.products[index].quantity += 1;
  };
    $scope.minusOne = function(index){
    $scope.products[index].quantity -= 1;
  };

这是外观 appearance

通过点击按钮项目应该添加，有人可以帮我吗？

Answer 1

将项目添加到products会自动更新您的表格，因为它是使用ng-repeat构建的。 Angular将检测products的修改并刷新表的行，因为它们基于它。

$scope.products.push({ name : "I don't speak russian", quantity: 0, price : 4200 });

在angularJs中将项目插入表格

1 个答案: