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