角度购物车获取总计

Question

我正在使用 Angular，正在循环浏览食物数组。 我将每个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;
    };

部分：

                <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>

发生的情况是总价从 0.00 美元开始，然后当我添加一些东西时它消失了，当我最终完成 3 个数量时，它会显示总价。 我知道这是丑陋、可怕、卑鄙的代码，我对此感到内疚。 但是我无法让它工作。 我只是想了解！ 为什么消失/重新出现的价格合适？

Answer 1

在 getTotal 中检查 f 不是未定义的，然后再使用它。此外，此块看起来像是可能导致问题的黑客攻击

if (total == null) {
                total = ''
            }

删除它。如果删除后出现问题，请修复代码以不添加不良食品。