在AngularJS中選擇一個項目後自動返回數據

Question

對於學校我正在進行練習。

練習如下。 選擇學校科目時，必須自動返回學校科目的老師。 需要使用控制器。

現在我試着做出來，並認爲有解決方案，但不幸的是它不工作，我不知道爲什麼。

有沒有人看到它出錯了？

<div ng-app="subjectApp"> 
    <div ng-controller="teacherController"> 
     Choose a school subject: 
     <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect"> 
      <option ng-repeat="option in data.availableOptions" value="{{option.subject}}">{{option.subject}}</option> 
     </select> 
     <br> 
     You have chosen, {{data.repeatSelect}} is given by {{data.teacher}}. 
    </div> 
    <hr> 
</div> 
<script> 
    var subjectApp = angular.module("subjectApp", []); 
    subjectApp.controller('teacherController', function ($scope) { 
     $scope.data = { 
      repeatSelect: null, 
      availableOptions: [ 
       {subject: "PEV", teacher: "a Teacher name1"}, 
       {subject: "WH", teacher: "a Teacher name2"}, 
       {subject: "APP", teacher: "a Teacher name3"}, 
       {subject: "ASP", teacher: "a Teacher name4"}, 
       {subject: "PHP", teacher: "a Teacher name5"}, 
       {subject: "CSP-3", teacher: "a Teacher name6"}, 
       {subject: "CISCO-P", teacher: "a Teacher name7"} 
      ] 
     }; 
    }); 
</script> 

問候延

Answer 1

像這樣的東西應該工作：

var subjectApp = angular.module("subjectApp", []); 
 
subjectApp.controller('teacherController', function ($scope) { 
 
    $scope.data = { 
 
    optIndex: null, 
 
    availableOptions: [ 
 
     {subject: "PEV", teacher: "a Teacher name1"}, 
 
     {subject: "WH", teacher: "a Teacher name2"}, 
 
     {subject: "APP", teacher: "a Teacher name3"}, 
 
     {subject: "ASP", teacher: "a Teacher name4"}, 
 
     {subject: "PHP", teacher: "a Teacher name5"}, 
 
     {subject: "CSP-3", teacher: "a Teacher name6"}, 
 
     {subject: "CISCO-P", teacher: "a Teacher name7"} 
 
    ] 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="subjectApp"> 
 
    <div ng-controller="teacherController"> 
 
     Choose a school subject: 
 
     <select name="repeatSelect" id="repeatSelect" ng-model="data.optIndex"> 
 
      <option ng-repeat="option in data.availableOptions track by $index" value="{{$index}}">{{option.subject}}</option> 
 
     </select> 
 
     <br> 
 
     <span ng-if="data.optIndex != null"> 
 
      You have chosen, {{data.availableOptions[data.optIndex].subject}} is given by {{data.availableOptions[data.optIndex].teacher}}. 
 
     </span> 
 
    </div> 
 
    <hr> 
 
</div>