angular shopping cart getTotal

Question

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:

     $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. 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?

Answer 1

in getTotal check that f is not undefined before using it. also this block looks like a hack that might cause issues

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

remove it. if there is an issue after removing it, fix the code not to add bad food items.