AngularJS Updating Total in Dynamic Table

Greenhorn

Posts: 3

posted 10 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello, I'm trying to learn AngularJS and have been stuck on this problem for 2 days. I am trying to total all prices and quantities when I add a book to my list. I hope someone can tell me what I'm doing wrong.

Here is my HTML:

<!DOCTYPE html>
<html ng-app>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Books</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/angular-csp.css" rel="stylesheet">

</head>

</div>

<div class="form-group">
            <label class="sr-only">New Title</label>
            <input type="text" ng-model="title" class="form-control input-sm" ng-model="title" placeholder="New Title">
        </div>
        <div class="form-group">
            <label class="sr-only">Author</label>
            <input type="text" ng-model="author" class="form-control input-sm" ng-model="author" placeholder="Author">

<label class="sr-only">Price</label>
            <input type="text" ng-model="price" class="form-control input-sm"
                   ng-model="price" placeholder="Price">
        </div>

<div class="form-group">
            <label class="sr-only">Quantity</label>
            <input type="text" ng-model="quantity" class="form-control input-sm"
                   ng-model="quantity" placeholder="Quantity">
        </div>

</form>

<div class="table responsive">
        <table class="table table-striped table bordered">
             <thead>
             <tr>
                 <th>##</th>
                 <th>Title</th>
                 <th>Author</th>
                 <th>Price</th>
                 <th>Qty</th>
                 <th>Action</th>
             </tr>
             </thead>
 
 
             <tr >
 
                 <td>{{person.number}}</td>
                 <td>{{person.title}}</td>
                 <td>{{ person.author }}</td>
                 <td>{{ person.price | currency }}</td>
                 <td>{{person.quantity | number}}</td>
                 <td class='deleterow' >
                     <div class='glyphicon glyphicon-remove'></div>
                 </td>
             </tr>
             <tr>
                 <td>Totals:</td>
                 <td>{{}}</td>
                 <td>{{}}</td>
                 <td>{{totPrice()|currency}}</td>
                 <td>{{totQty()|number}}</td>
             </tr>
         </table>
    </div>
</div>

<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src=bootstrap.min.js></script>
<script src=ngStorage.min.js></script>

</body>

</html>

Here is my JS:

[code=javascript]
$scope.updateTotals = [];
function ExampleCtrl ($scope){
    $scope.people = [
        {number: '1', title: 'Tom Sawyer', author: 'Mark Twain', price: '28', quantity: '2', action: 'xx'},
        {number: '2', title: 'Alice\'s Adventure in Wonderland', author: 'Lewis Carroll', price: '17.00', quantity: '2', action: 'xx'},
        {number: '3', title: 'The Old Man and the Sea', author: 'Ernest Hemingway', price: '17', quantity: '1', action: 'xx'}

];

$scope.addPerson = function (){
        var person = {
            number: $scope.number,
            title: $scope.title,
            author: $scope.author,
            price: $scope.price,
            quantity: $scope.quantity,
            action: $scope.action

};

$scope.people.push( person );
    };

$scope.removePerson = function (index){
        $scope.people.splice( index, 1 );

};

$scope.totPrice = function (){
        var totPrice = 0;
        var values = [$scope.people]
        angular.forEach(values, function(price, quantity) {
            totPrice += (price * quantity)
        });
        return totPrice;
    };
    $scope.totQty = function (){
        var totQty = 0;
        angular.forEach(
            $scope.people.quantity, function (quantity){
                totQty += (
                    $scope.people.quantity * $scope.people.title
                    );
                return totQty; }
        );

};

}

Thanks for any help.

Dee

-Dee