I have a javascript file that has two functions that operate similarily to each other but with different values.
These functions are exceuted via a form within HTML
The first form executes properly, but the second form will not display properly. Am I executing or calling the second function improperly?
What can be done to have it execute properly, similarily to the first function?
JavaScript code:
<script>
function OrderFormController($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: '12 Semester Hours (+ Fees)',
price: 3031,
fee: 1031,
active:false
},{
name: 'Residence Hall',
price: 2620,
fee: 0,
active:false
},{
name: 'Meal Plan',
price: 1970,
fee: 0,
active:false
},{
name: 'Parking Permit',
price: 180,
fee: 0,
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 + s.fee;
}
});
return total;
};
}
function tutionFormController($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.things = [
{
name: '12 Semester Hours (+ Fees)',
price: 3000,
fee: 2031,
active:false
},{
name: 'Tchnology Fee',
price: 800,
fee: 0,
active:false
},{
name: 'Distance Fee',
price: 900,
fee: 0,
active:false
}
];
$scope.toggleActive = function(t){
t.active = !t.active;
};
// Helper method for calculating the total price
$scope.total = function(){
var total = 0;
// Use the angular forEach helper method to
// loop through the things array:
angular.forEach($scope.things, function(t){
if (t.active){
total+= t.price + t.fee;
}
});
return total;
};
}
</script>
HTML code:
<div>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<h1>Tutition Estimate Calculator</h1>
<div class="tab" style="text-align: right;">
<button class="tablinks" onclick="openStudent(event, 'tabOne')" id="defaultOpen">Face to Face</button>
<button class="tablinks" onclick="openStudent(event, 'tabTwo')">Online</button>
</div>
<div id="tabOne" class="tabcontent">
<form ng-app ng-controller="OrderFormController">
<h2>Face to Face</h2>
<ul>
<!-- Loop through the services array, assign a click handler, and set or
remove the "active" css class if needed -->
<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
<!-- Notice the use of the currency filter, it will format the price -->
{{service.name}} <span>{{service.price + service.fee | currency}}</span>
</li>
</ul>
<div class="total">
<!-- Calculate the total price of all chosen services. Format it as currency. -->
Total: <span>{{total() | currency}}</span>
</div>
</form>
</div>
<div id="tabTwo" class="tabcontent">
<form ng-app ng-controller="tutionFormController">
<h2>Online</h2>
<ul>
<!-- Loop through the things array, assign a click handler, and set or
remove the "active" css class if needed -->
<li ng-repeat="thing in things" ng-click="toggleActive(thing)" ng-class="{active:thing.active}">
<!-- Notice the use of the currency filter, it will format the price -->
{{thing.name}} <span>{{thing.price + thing.fee | currency}}</span>
</li>
</ul>
<div class="total">
<!-- Calculate the total price of all chosen things. Format it as currency. -->
Total: <span>{{total() | currency}}</span>
</div>
</form>
</div>
</div>
NOTE: There is some additional code within the HTML for tabs, this works but is not relevant for the issue present. I just want the second form / function to work properly, like the one before it.
