在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>

致敬Jens

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>

​