HTML 中的 JavaScript 多种功能

Question

我有一个 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 代码:

<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 中有一些用于选项卡的附加代码，这可以工作，但与当前问题无关。我只希望第二种形式/功能能够正常工作，就像之前的那样。

Answer 1

您正在两个中使用 ng-app，但您未指定 APP 名称 name。在这里，我删除了 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) {
    .....
    .....
});