在 ng-repeat 中使用变量并将其传递给控制器

Question

我创建了一个包含两列的 AngularJS 应用程序：一列用于菜单，另一列用于内容（菜单中的每个链接都链接到）。内容和菜单位于我正在使用 Lambda 函数扫描的 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;

        });

});

内容以简单的 content.html 模板显示在路由中，如下所示：

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

更新：这里是我仍然需要帮助的地方：

1. 如何将菜单控制器中的 $index 变量传递/使用到内容控制器，以便在单击每个按钮时在正确的模板中根据需要更新内容？

为了帮助更好地理解功能：

• 第一课链接到第一课的内容 - 第一课的内容是 显示在内容模板中。
• 列表项第二课链接到第二课的内容 - 第二课的内容是 显示在内容模板中。
• 列表项第三课链接到第三课的内容 - 第三课的内容 显示在内容模板中。

很抱歉，这篇文章很长，但我想提供足够的细节来帮助澄清任何混淆。

Answer 1

要将数据从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);
};

有关详细信息，请参阅

• AngularJS ng-click Directive API Reference