MEAN Stack：通过 AngularJS 计算和显示值的总和

Question

您好，我是 MEAN Stack 的初学者，目前遇到了一个逻辑挑战。

我知道如何在 HTML 中使用 {{element.length}} 获取表格元素的数量，但我需要获取给定值的总和。

提前感谢您的帮助！

HTML：

<div class="jumbotron text-center">
    <h1>Volume <span class="label label-info">{{getTotal()}}    </span></h1>
        </div>

<div class="text-center" >
            <table class="table" >
                <thead>
                <tr>
                    <th>Drink</th>
                    <th>Volume</th>
                    <th>Date</th>
                    <th>Comment</th>
                    <th>Action</th>

                </tr>
                </thead>
                <tbody ng-repeat="drink in drinks">
                <tr>
                    <td>{{drink.text}}</td>
                    <td>{{drink.volume}} Liter</td>
                    <td>{{drink.time}}</td>
                    <td>{{drink.comment}}</td>
                    <td><button type="submit" class="btn btn-primary btn-sm" 
                      ng-click="deleteDrink(drink._id)">delete</button></td>

                </tr>

                </tbody>
            </table>

        </div>'

型号：

 var mongoose = require('mongoose');
      var Schema =new mongoose.Schema({
        text : {type : String, default: ''},
        volume: {type: Number, default: null},
        zeit: {type: Date, default:Date.now},
        comment: {type: String}
});
module.exports = mongoose.model('mongoose', Schema);'

控制器：

angular.module('drinkController', [])

    // inject the drink service factory into our controller
    .controller('mainController', ['$scope','$http','Drinks', function($scope, $http, Drinks) {
        $scope.formData = {};
        $scope.loading = true;

        // GET =====================================================================
        // when landing on the page, get all drinks and show them
        // use the service to get all the drinks
        Drinks.get()
            .success(function(data) {
                $scope.drinks = data;
                $scope.loading = false;
            });

        // CREATE ==================================================================
        // when submitting the add form, send the text to the node API
        $scope.createDrink = function() {

            // validate the formData to make sure that something is there
            // if form is empty, nothing will happen
            if ($scope.formData.text != undefined) {
                $scope.loading = true;

                // call the create function from our service (returns a promise object)
                Drinks.create($scope.formData)

                    // if successful creation, call our get function to get all the new drinks
                    .success(function(data) {
                        $scope.loading = false;
                        $scope.formData = {}; // clear the form so our user is ready to enter another
                        $scope.drinks = data; // assign our new list of drinks
                    });
            }
        }


//Problem Function!! I don't know how to read desired values
$scope.getTotal=function(){

    var total=0;
    for (var i=0; i <$scope.drinks; i++){
        var sum= $scope.drinks.volume[i]; //??
        total= sum ; //?

    }
    return total;
}



        // DELETE ==================================================================
        // delete a todo after checking it
        $scope.deleteDrink = function(id) {
            $scope.loading = true;

            Drinks.delete(id)
                // if successful creation, call our get function to get all the new todos
                .success(function(data) {
                    $scope.loading = false;
                    $scope.drinks = data; // assign our new list of todos
                });
        };
    }]);

所以我在 /api/drinks 有

    [{"_id":"555c23943e0bf3fc403864c3",
"comment":"Yummie",
"__v":0,
"time":"2015-05-20T06:03:17.340Z",
"**volume":2**,
"text":"Coke"},
{"_id":"555c239d3e0bf3fc403864c4",
"comment":"Mooh!",
"__v":0,
"time":"2015-05-20T06:03:17.340Z",
**"volume"**:1,
"text":"Milk"}
]

在我的 HTML 中，我需要显示所有卷条目的值，所以应该是 3。

Answer 1

这应该可行：

$scope.getTotal=function(){

var total=0;
for (var i=0; i <$scope.drinks.length; i++){
    total += $scope.drinks[i].volume;
}
return total;
}