Автоматически возвращать данные после выбора элемента в AngularJS

Question

Автоматически возвращать данные после выбора элемента в AngularJS

0

В школе я делаю упражнение.

Упражнение выглядит следующим образом. Когда выбран школьный предмет, он должен автоматически возвращать учителя школьного предмета. Требуется использовать контроллер.

Теперь я попытался сделать это и подумал, что есть решение, но, к сожалению, это не работает, и я понятия не имею, почему.

Кто-нибудь видит, где это происходит неправильно?

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

С уважением, Йенс

Swolschblauw 01 нояб. 2015, в 20:52

Источник

Теги:

angularjs

angularjs-scope

angularjs-ng-repeat

1 ответ

Ещё вопросы

Thibaud Sowa · Answer 1 · 2015-11-01T17-32-00.000Z

Что-то вроде этого должно работать:

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>