在angularJs中插入项目表

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 });