2番目のコントローラは私の角のjsで動作しません

Question

2つのコントローラを持つ方法をすべて検索しますが、動作しません。 HTMLに何か問題はありますか？スクリプトに何か問題はありますか？

Javascriptコード：

<script> 

var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) { 
$scope.products = []; 
$scope.addItem = function() { 
    $scope.errortext = ""; 
    if (!$scope.addMe) {return;} 
    if ($scope.products.indexOf($scope.addMe) == -1) { 
     $scope.products.push($scope.addMe); 
    } else { 
     $scope.errortext = "The item is already in your shopping list."; 
    } 
} 
$scope.removeItem = function (x) { 
    $scope.errortext = ""; 
    $scope.products.splice(x, 1); 
} 
}); 


var topics = angular.module("myList", []); 
topics.controller("topicCtrl", function($scope) { 
$scope.products = []; 
$scope.addItem = function() { 
    $scope.errortext = ""; 
    if (!$scope.addMe) {return;} 
    if ($scope.products.indexOf($scope.addMe) == -1) { 
     $scope.products.push($scope.addMe); 
    } else { 
     $scope.errortext = "The item is already in your shopping list."; 
    } 
} 
$scope.removeItem = function (y) { 
    $scope.errortext = ""; 
    $scope.products.splice(x, 1); 
} 
}); 

angular.bootstrap(document.getElementById("app2"), ['myList']); 

function addElement(value) 
{ 
var dropdown = document.getElementById("OperationType"); 
    var current_value = dropdown.options[dropdown.selectedIndex].value; 

    if (current_value == "Others") { 
     document.getElementById("OperationNos").style.display = "block"; 
    } 
    else { 
    document.getElementById("OperationNos").style.display = "none"; 
} 
} 

function addElement2(value) 
{ 
var dropdown = document.getElementById("topic"); 
    var current_value = dropdown.options[dropdown.selectedIndex].value; 

    if (current_value == "Others") { 
     document.getElementById("usr").style.display = "block"; 
    } 
    else { 
    document.getElementById("usr").style.display = "none"; 
    } 
} 

HTMLコード：

<!--STANDARDS --> 
<td> 
    <div ng-app="myShoppingList" ng-controller="myCtrl" id="app1" class="panel panel-default" style="max-width:400px;"> 

    <div class="panel-heading"> 
     <h3> 
      <select name="type" class="form-control" id="OperationType" onchange="addElement(this.value)" name="location"> 
        <option value="Teacher">Teacher</option> 
        <option value="Coordinator">Coordinator</option> 
        <option value="Others">Others</option> 
      </select> 
      <input type="text" id="OperationNos"style="border: none;"class="form-control" placeholder="Input Title" value="{{x}}" > 
     </h3> 
    </div> 

     <div class="panel-body"> 
     <ul class="list-group"> 
      <li ng-repeat="x in products" class="list-group-item"> 
      <input type="text" style="border: none;"class="form-control" value="{{x}}" id="usr"> 
      <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span> 
      </li> 
     </ul> 
     </div> 

     <div class="panel-footer"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="input-group"> 
       <input type="text" class="form-control" ng-model="addMe" placeholder="Add description"> 
       <span class="input-group-btn"> 
        <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button> 
       </span> 
       </div> 
      </div> 
      </div> 
      <p class="w3-padding-left w3-text-red">{{errortext}}</p> 
     </div> 
     </div> 
</td> 
<!-- END OF STANDARDS --> 
<!--TOPICS --> 
<td> 
    <div ng-app="myList" ng-controller="topicCtrl" id="app2" class="panel panel-default" style="max-width:400px;"> 

     <div class="panel-heading"> 
     <h3> 
     <select name="type" class="form-control" id="topic" onchange="addElement2(this.value)" name="topic"> 
       <option value="Teacher">Teacher</option> 
       <option value="Coordinator">Coordinator</option> 
       <option value="Others">Others</option> 
       </select> 
     <input type="text" id="topics"style="border: none;"class="form-control" placeholder="Input Title" value="{{y}}" ></h3> 
     </div> 

     <div class="panel-body"> 
     <ul class="list-group"> 
      <li ng-repeat="y in products" class="list-group-item"> 
      <input type="text" style="border: none;"class="form-control" value="{{y}}" id="usr"> 
      <span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span> 
      </li> 
     </ul> 
     </div> 

     <div class="panel-footer"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="input-group"> 
       <input type="text" class="form-control" ng-model="addMe" placeholder="Add description"> 
       <span class="input-group-btn"> 
        <button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button> 
       </span> 
       </div> 
      </div> 
      </div> 
      <p class="w3-padding-left w3-text-red">{{errortext}}</p> 
     </div> 
     </div> 
</td> 
<!-- END OF TOPICS --> 

Answer 1

• 一つだけ AngularJSのアプリケーションが可能angularjsドキュメントを参照してください。 HTMLドキュメントごとに自動ブートストラップされています。ドキュメントにある最初のngAppは、アプリケーションとして自動ブートストラップするルート要素を定義するために使用されます。
• 複数のアプリケーションをHTMLドキュメントで実行するには、代わりにangular.bootstrapを使用して手動でブートストラップする必要があります。
• AngularJSアプリケーションを相互にネストすることはできません。
• ngAppと同じ要素にtransclusionを使用するディレクティブを使用しないでください。これには、ngIf、ngInclude、ngViewなどのディレクティブが含まれます。これにより、アプリ$ rootElementとアプリのインジェクタが誤って配置され、アニメーションが機能しなくなり、アプリの外側からインジェクタにアクセスできなくなります。