@sudden_man
bcvbcvbc

Почему не работает controller?

Ребята, привет.
Я начал учить Ангуляр. Ну и как подавляющее большинство, начал делать свой проектик. Не буду долго о его содержании. В общем суть такова: ест два select'a. В одном начальная станция метро, от которой ехать собираетесь, во втором - конечная. И по нажатию на кнопочку, будет считаться время. Конечно может многие скажут зачем тут ангуляр, ну вот так я хочу поиздеваться. В общем хочу каждой станции задать имя (которое будет отображаться в option у select'a и время до следующей станции. Ну вот в контроллере и пишу:

var app = angular.module('metroTime', []);

app.controller('StationsCtrl', function () {
	this.data = [
		{
			'name': 'Героев Днепра',
			'time_to_nxt': 2
		},
		{
			'name': 'Минская',
			'time_to_nxt': 1.4
		}
		{
			'name': 'Оболонь',
			'time_to_nxt': 2.15
		}
	];
});


И вот мой HTML файл (делал чушь всякую над ним, ну я оставлю просто его здесь, а вы подскажите как сделать так, чтобы все отображалось. Хотяб имя пусть отобразится в option):
<!DOCTYPE html>
<html lang="en" ng-app="metroTime">

<head>
    <meta charset="UTF-8">
    <title>PONOMARENKO</title>

    <!-- build:css css/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/media.css">
    <!-- endbuild -->
    
    

</head>

<body>

    <select name="station_a" id="station_a" ng-controller="StationsCtrl as metro">
        <option value="empty"></option>
        <option>
            {{metro.data.name}}
        </option>
    </select>

<!-- build:js js/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/main.js -->
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
<!-- endbuild -->
</body>

</html>


Заранее спасибо всем за подсказки!! Буду очень благодарен, если поможете)

P.S.
И если есть такие добрые люди, которые могут немного помочь в освоении этого прекрасного фрейм-ворка, отзовитесь!!!
  • Вопрос задан
  • 248 просмотров
Решения вопроса 1
romanzhak
@romanzhak
Mathematician
Как минимум в this.data элементы массива надо разделять запятой.
Все работает: jsfiddle.net/zhak55/vb4r18qa

<select 
    name="station_a" 
    ng-controller="Stations"
    id="station_a" 
    ng-model="myStation"
    ng-options="station.name for station in data">
    <option value="">-- choose station --</option>
   </select>


var app = angular.module('metroTime', []);

app.controller('Stations', function($scope) {
  $scope.data = [
    {
      'name': 'Героев Днепра',
      'time_to_nxt': 2
    },
    {
      'name': 'Минская',
      'time_to_nxt': 1.4
    },
    {
      'name': 'Оболонь',
      'time_to_nxt': 2.15
    }
  ];
});

angular.bootstrap(document, ['metroTime'])
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы