I am looking to create a toggle button that will add money to a total price when clicked once, and subtract that amount when clicked again to "deselect" it.
Currently, I have this HTML code that toggles between adding and removing a class to change the background color of the selected button -
<div class="col-md-4" ng-repeat="service in services_data track by $index">
<div ng-class="showDetails[$index] ? 'panel-warning': 'panel-default'" class="panel">
<button ng-click="$parent.showDetails[$index] = !$parent.showDetails[$index]; price(service.price, service.est_time_mins)" class="panel-heading btn"><span class="pull-left badge">$ {{service.price}}</span>{{service.name}}</button>
<div class="panel-body">
{{service.est_time_mins}} mins. {{service.style}}
</div>
</div>
</div>
In addition, here is the corresponding controller code -
app.controller('AppointmentController', ['$scope','services', function($scope, services) {
var data = {};
data.fn = 'services';
services.getData(data).success(function(return_data){
console.log(return_data);
$scope.services_data = return_data;
});
var data = {};
data.fn = 'get_barbers';
services.getData(data).success(function(rd){
$scope.barbers = rd;
console.log(rd);
});
$scope.total_price = 0;
$scope.time = 0;
$scope.price = function(price, time){
$scope.total_price = parseInt(price) + parseInt($scope.total_price);
$scope.time = parseInt(time) + parseInt($scope.time);
}
}]);
I hope this explains everything clearly. Thank you for your assistance.