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

Question

我创建了一个AngularJS应用，其中包含两列：一列用于菜单，第二列用于内容（菜单中的每个链接都链接到）。内容和菜单位于DynamoDB中的一个表中，我正在使用Lambda函数进行扫描。此函数的输出将作为具有以下结构的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;
            console.log($scope.navi)

        });

使用ng-repeat构建的菜单

<div class="col-4" ng-controller="menu">
    <div ng-repeat="nav in navi">
    <ul><li>{{ nav['course-lesson'] }}</li></ul>
</div>

此构建以下菜单：

Lesson One
Lesson Three
Lesson Two

而且我正在使用第二个控制器，该控制器使用同一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", {
    templateUrl : "templates/content.html",
    controller : "content"
});

这里是我需要帮助的地方：

1. 由ng-repeat生成的链接需要包含一个变量，因此每个链接将指向不同的json数组元素，其中包含每个课程的内容。

这里是伪代码：

Lesson One - needs to link to content from response.data.body[0]
Lesson Two - needs to link to content from response.data.body[1]
Lesson Two - needs to link to content from response.data.body[2]

1. 如何将相同的变量从菜单传递到内容控制器？在上面的示例routeProvider中，“ / content”必须类似于“ content /：id”，因此我可以将response.data.body所需的数组元素ID传递给控制器​​。

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

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

很长的帖子，很抱歉，但是我想提供足够的细节以帮助澄清任何混淆。

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