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

Question

我创建了一个包含两列的 AngularJS 应用程序：一列用于菜单，另一列用于内容（菜单 link 中的每一列 link）。内容和菜单位于我使用 Lambda 函数扫描的 DynamoDB 中的 table 中。此函数的输出作为具有以下结构的 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"
});

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

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

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

第一课 links 到第一课的内容 - 第一课的内容是显示在内容模板中。
列出项目第二课 link 到第二课的内容 - 第二课的内容是显示在内容模板中。
列出项目第三课 link 到第三课的内容 - 第三课内容显示在内容模板中。

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

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

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

Using a variable in ng-repeat and passing it to a controller

amazon-dynamodb

angularjs

ngroute