我有一个javascript文件，它有两个函数，它们彼此相似，但值不同。
这些功能通过HTML
中的表单提供第一个表单正确执行，但第二个表单无法正常显示。 我不正确地执行或调用第二个功能吗？
如果能够正确执行第一个函数，可以做些什么呢？
JavaScript代码：
<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>
注意：HTML中有一些额外的代码用于标签，这有效但与现有问题无关。 我只是希望第二种形式/功能正常工作，就像之前那样。
答案 0 :(得分：1)
您正在使用ng-app两个，但您没有指定APP名称。在此，我删除了ng-app并添加了最高div。
<div ng-app>
<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-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-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>
<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>
以下是创建多个APP的示例。
var app = angular.module("myApp", []);
app.controller("OrderFormController", function($scope) {
.....
.....
});
var app1 = angular.module("myApp1", []);
app1.controller("tutionFormController", function($scope) {
.....
.....
});