ClarkySmiverz77 ClarkySmiverz77 - 2 months ago 8
AngularJS Question

AngularJs - ng-repeat not displaying data

Can someone advise why the following is not working.

Controller:

(function () {
'use strict';

angular
.module("shop")
.controller("CartSummaryController", CartSummaryController);

function CartSummaryController($scope, cart) {

$scope.cartData = cart.getProducts();

console.log($scope.cartData);

$scope.total = function () {
var total = 0;
for (var i = 0; i < $scope.cartData.length; i++) {
total += ($scope.cartData[i].price * $scope.cartData[i].count);
}
return total;
}

$scope.remove = function (id) {
cart.removeProduct(id);
}


}

})();


Html:

Your Cart





<div ng-show="cartData.length == 0">
There are no products in your shopping cart.
</div>

<div ng-hide="cartData.length == 0">
<table class="table">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
<th class="text-right">Price</th>
<th class="text-right">Subtotal</th>
</tr>
</thead>
</table>

<tbody>
<tr ng-repeat="item in cartData">
<td>{{item.count}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
<td>blah</td>
</tr>
</tbody>

</div>


Object printed to console:

Object
count
:
1
id
:
"1"
name
:
"item #1"
price
:
"100.00"

Furthermore, is there a way to debug the ng-repeat?

Answer

The label </table> should go after the label </tbody>