В школе я делаю упражнение.
Упражнение выглядит следующим образом. Когда выбран школьный предмет, он должен автоматически возвращать учителя школьного предмета. Требуется использовать контроллер.
Теперь я попытался сделать это и подумал, что есть решение, но, к сожалению, это не работает, и я понятия не имею, почему.
Кто-нибудь видит, где это происходит неправильно?
<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>
С уважением, Йенс
Что-то вроде этого должно работать:
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>