I've been working on a shopping cart feature for my Ionic app and everything is coming together nicely, except for the running itemized total. By default, the items in my array are set to active:false and when selected, they switch to active:true and their price is added to the running total. However, I also want to display an itemized list with the product names. I tried adding a new function to store the active services along with their prices, but I'm having trouble getting each item to display on its own line using ng-repeat. Here are the code snippets related to this issue. I know I must be missing something simple, so I'd appreciate it if you could take a look. Thank you.
<ion-view view-title="Shop" ng-controller="OrderFormController">
<ion-content>
<div class="card">
<ion-item ng-repeat="service in services">
{{totalDetail()}}
</ion-item>
</div>
<div class="card">
<ion-item ng-repeat="service in services">
{{service.name}}
<button class="button button-outline button-small button-stable" ng-click="toggleActive(service)" ng-class="{active:service.active}">
{{service.price | currency}}
</button>
</ion-item>
</div>
<div class="card">
<ion-item>
<!-- Calculate the total price of all chosen services. Format it as currency. -->
Total: {{total() | currency}}
</ion-item>
</div>
</ion-content>
myApp.controller('OrderFormController', function($scope) {
// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.
$scope.services = [
{
name: 'Espresso',
price: 27,
active:false
},{
name: 'Americano',
price: 36,
active:false
},{
name: 'Macchiato',
price: 57,
active:false
},{
name: 'Cappuccino',
price: 42,
active:false
},{
name: 'Mocha',
price: 55,
active:false
},{
name: 'Latte',
price: 39,
active:false
},{
name: 'Chai Latte',
price: 50,
active:false
}
];
$scope.toggleActive = function(s){
s.active = !s.active;
};
// Helper method for calculating the total price
$scope.total = function(){
var total = 0;
// Use the angular forEach helper method to
// loop through the services array:
angular.forEach($scope.services, function(s){
if (s.active){
total+= s.price;
}
});
return total;
};
$scope.totalDetail = function(){
var totalDetail = "";
// Use the angular forEach helper method to
// loop through the services array:
angular.forEach($scope.services, function(s){
if (s.active){
totalDetail+= s.name+" $"+s.price+".00 ";
}
});
return totalDetail;
};
});