summing up in angularjs

Question

i am trying to get the sum of the ngRepeat i have here and i want to do it in the html file is there anyway i can store the sum as it increments

 <div class = "row" ng-repeat= "product in products">
   <div class = "col"><input type="checkbox" name="check" value="{{product.product_id}}"></div>
   <div class = "col">{{product.product_name}}</div>
   <div class = "col"><input type="text" ng-model="quantity"></div>
   <div class = "col">{{product.price * quantity}}</div>
</div>

   <div class = "row" align="center">
      <div class="col">
         <strong>Total : {{total}}</strong>
      </div>

Answer 1

您可以使用ng-init，如

<div ng-init="items.total = {}">
    <div class = "row" ng-repeat= "product in products" >
           <div class = "col"><input type="checkbox" name="check" value="{{product.product_id}}"></div>
           <div class = "col">{{product.product_name}}</div>
           <div class = "col"><input type="text" ng-model="quantity"></div>
           <div class = "col" ng-init="items.total.quantity= items.total.quantity + product.price * quantity">{{product.price * quantity}}</div>
        </div>

           <div class = "row" align="center">
              <div class="col">
                 <strong>Total : {{items.total.quantity}}</strong>
              </div>
           </div>

    </div>

Answer 2

我不知道你的变量，但我认为你错过

{{product.price * product.quantity}}

如果没有，请告诉我们错误消息？

Answer 3

最好不要在html中使用你的逻辑。但如果你想要，你可以试试这个

<div ng-init="temp={total:0}">
     <div class = "row" ng-repeat= "product in products" ng-init="total=0">
       <div class = "col" ng-init="temp.total=temp.total+product.price"><input type="checkbox" name="check" value="{{product.product_id}}"></div>
       <div class = "col">{{product.product_name}}</div>
       <div class = "col"><input type="text" ng-model="quantity"></div>
       <div class = "col">{{product.price * quantity}}</div>
    </div>
</div>

       <div class = "row" align="center">
          <div class="col">
             <strong>Total : {{temp.total}}</strong>
          </div>