Использование переменной в ng-repeat и передача ее в контроллер - PullRequest
Новая
       31

Использование переменной в ng-repeat и передача ее в контроллер

0 голосов
/ 23 февраля 2020

Я создал приложение AngularJS, которое содержит два столбца: один для меню и второй для содержимого (каждая ссылка в меню ссылается на). Содержимое и меню находятся в таблице в DynamoDB, которую я сканирую с помощью лямбда-функции. Выходные данные этой функции используются в качестве ответа JSON со следующей структурой: 

{
    "body": [{
        "course-content": "RL front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_1.mp4",
        "course-id": "rcl",
        "course-title": "sml",
        "course-lesson": "Lesson One"
    }, {
        "course-content": "RL2 front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_2.mp4",
        "course-id": "rcl2",
        "course-title": "sml",
        "course-lesson": "Lesson Two"
    }, {
        "course-content": "RL3 front matter",
        "course-video": "https://123-course-videos.s3.amazonaws.com/vid_3.mp4",
        "course-id": "rcl3",
        "course-title": "sml",
        "course-lesson": "Lesson Three"
    }]
}

Я (с помощью великих людей здесь) построил следующий контроллер, который просматривает ответ и строит меню:

контроллер 

app.controller('menu', function($scope, $http) {
    $http.get('api address').
        then(function(response) {
            $scope.navi = response.data.body;
            $scope.selectCourse = function(course, index, path) {
            console.log(path)
            $scope.content = response.data.body[index]
            console.log($scope.content)
          };

                });
});

меню, построенное с использованием ng-repeat 

<div ng-repeat="nav in navi">
    <ul><li>{{ nav['course-lesson'] }}
        <button ng-click="selectCourse(nav, $index, '/content/' + 
        $index)">Select</button>
    </li></ul>
</div>

Это построение следующего меню: 

Lesson One <button>
Lesson Three <button>
Lesson Two <button>

И Я использую второй контроллер, который использует содержимое из того же вызова API: 

app.controller('content', function($scope, $http) {
    $http.get('api address').
        then(function(response) {
            $scope.content = response.data.body;

        });

});

содержимое отображается в маршруте с простым содержимым. html шаблон выглядит следующим образом: 

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "templates/main.html"
  })
  .when("/content/:id", {
    templateUrl : "templates/content.html",
    controller : "content"
});

Обновлено: вот где мне все еще нужна помощь:

  1. Как передать / использовать переменную $ index в контроллере меню для контроллера контента, чтобы контент обновлялся как нужен в правильном шаблоне, когда я нажимаю на каждую кнопку?

Чтобы лучше понять функциональность:

  • Урок Один - ссылки на контент для первого урока - контент первого урока отображается в шаблоне контента.
  • Элемент списка Урок Две ссылки на контент для второго урока - контент второго урока отображается в шаблоне контента.
  • Элемент списка Урок Три ссылки на контент для урока три - контент урока три отображается в шаблоне контента.

Извините за длинный пост, но я хотел предоставить достаточно подробностей для помогите прояснить любую путаницу.

1 Ответ

1 голос
/ 23 февраля 2020

Чтобы передать данные в контроллер из элемента ng-repeat, используйте директиву ng-click: 

<div class="col-4" ng-controller="menu">
    <div ng-repeat="nav in navi">
    <ul>
       <li>
          {{ nav['course-lesson'] }}
          <button ng-click="selectCourse(nav, $index)">Select</button>
       </li>
    </ul>
</div>

Назначьте функцию для области действия: 

$scope.selectCourse = function(course, index) {
    console.log(course, index);
};

Для получения дополнительной информации см.

...