Question

我正在使用角度，并在一系列食物中循环。我将每个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 = ''
            }

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

角度购物车getTotal

1 个答案: