[英]angular shopping cart getTotal
i'm using angular and am looping through an array of food. 我正在使用角钢,并遍历各种食物。 i set each ng-model to a different model (food.zero, food.one, food.two) and my controller looks like this:
我将每个ng模型设置为不同的模型(food.zero,food.one,food.two),我的控制器如下所示:
$scope.food = [
{
"name": "Tomato Soup",
"price": 5,
"quantity": ''
}, {
"name": "Garden Salad",
"price": 5,
"quantity": ''
}, {
"name": "Dinner Plate",
"price": 12,
"quantity": ''
}
];
$scope.addToCart = function() {
$scope.food.quantity = $scope.food.zero;
$scope.food[1].quantity = $scope.food.one;
$scope.food[2].quantity = $scope.food.two;
};
$scope.getTotal = function() {
var total = 0;
for(var i = 0; i < $scope.food.length; i++) {
var yum = $scope.food[i];
total += (yum.price * yum.quantity);
}
return total;
};
the partial: 部分:
<div class="form-group">
<input ng-model="food.zero"
type="number"
class="form-control bfh-number"
placeholder="Quantity"
ng-minlength="1"
ng-maxlength="2"
style ="width: 100px"
/>
</div>
<button type="submit" class="btn btn-primary" ng-click="addToCart(food)">Add To Cart</button></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a onclick="return false;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title">Salad</h4>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"style="max-height:400px">
<img style="float:left" height=50% width=50% src="http://9ad4fbf943e652b35b9f-c4a49d76d48cd1b152556e6b92003f52.r98.cf2.rackcdn.com/i/food/dishes/large/tomato-basil-bisque-536.png">
<div style="float:left">Vine-ripened pear tomatoes pureed with fresh cream for a velvety smooth flavor accented by hints of red pepper and oregano and topped with our homemade asiago cheese croutons. Served daily.<br>
<div class="form-group">
<input ng-model="food.one"
type="number"
class="form-control bfh-number"
placeholder="Quantity"
ng-minlength="1"
ng-maxlength="2"
style ="width: 100px"
/>
</div>
<button type="submit" class="btn btn-primary" ng-click="addToCart(food)">Add To Cart</button></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a onclick="return false;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title"> Entrée</h4>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"style="max-height:400px">
<img style="float:left" height=50% width=50% src="http://9ad4fbf943e652b35b9f-c4a49d76d48cd1b152556e6b92003f52.r98.cf2.rackcdn.com/i/food/dishes/large/tomato-basil-bisque-536.png">
<div style="float:left">Vine-ripened pear tomatoes pureed with fresh cream for a velvety smooth flavor accented by hints of red pepper and oregano and topped with our homemade asiago cheese croutons. Served daily. <br>
<div class="form-group">
<input ng-model="food.two"
type="number"
class="form-control bfh-number"
placeholder="Quantity"
ng-minlength="1"
ng-maxlength="2"
style ="width: 100px"
/>
</div>
<button type="submit" class="btn btn-primary" ng-click="addToCart(food)">Add To Cart</button></div>
</div>
</div>
</div>
</div>
<div align="left" id="cart"><h2>Your Cart</h2>
<table>
<tr ng-repeat="f in food">
<td>{{f.name}}: {{f.price | currency}} x {{f.quantity}}</td>
</tr>
</table>
</div>
<div align="center" style="width:200px;">
<h2>Total: {{ getTotal() | currency }}</h2>
what happens is the total starts as $0.00, then when i add something it disappears and when i finally have the 3 quantities fulfilled it shows the total price. 发生的是总的起价为$ 0.00,然后当我添加一些东西时,它消失了,而当我最终满足3个数量时,它显示了总价格。 i know this is ugly, horrible, vile code and i feel guilty about it.
我知道这是丑陋,可怕,邪恶的代码,对此我感到内。 but i haven't been able to get it to work.
但我一直无法使它工作。 i just want to understand!
我只想了解! why does is disappear/reappear with the right price?
为什么以正确的价格消失/重新出现?
in getTotal check that f is not undefined before using it. 在getTotal中,在使用f之前检查f是否未定义。 also this block looks like a hack that might cause issues
而且这个区块看起来像是一个hack,可能会引起问题
if (total == null) {
total = ''
}
remove it. 去掉它。 if there is an issue after removing it, fix the code not to add bad food items.
如果将其删除后出现问题,请修复代码,不要添加不良食品。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.