我需要你的帮助,我是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
通过点击按钮项目应该添加,有人可以帮我吗?
答案 0 :(得分:0)
将项目添加到products
会自动更新您的表格,因为它是使用ng-repeat构建的。 Angular将检测products
的修改并刷新表的行,因为它们基于它。
$scope.products.push({ name : "I don't speak russian", quantity: 0, price : 4200 });