Question

我正试图弄清楚如何使用ng-repeat来循环遍历一个对象数组。

我有一个这样的工厂设置，里面有三组数据：

mainApp.factory("dashboardContent", function() {
    return {
        contentBoxes: [
            {
                boxType: "image",
                boxIcon: "icons-image",
                boxTitle: "on Chapter 1, paragraph 3",
                header: {
                    title: "Lorem ipsum title sit amet",
                    subtitle: "by Lorem Ipsum"
                },
                authorImage: "/asssets/ssfsgterwes",
                embedContent: ""
            },
            {
                boxType: "audio",
                boxIcon: "icons-audio",
                boxTitle: "on Chapter 12, paragraph 2",
                header: {
                    title: "lorem ipsum audio sit maet",
                    subtitle: "by multiple objects"
                },
                authorImage: "/asssets/ssfsgterwes",
                embedContent: ""
            },
            {
                boxType: "quote",
                boxIcon: "icons-lightbulb",
                boxTitle: "on Chapter 01, paragraph 5",
                header: {
                    title: "lorem ipsum quote sit maet",
                    subtitle: "by multiple objects parsing"
                },
                authorImage: "/asssets/ssfsgterwes",
                embedContent: ""
            }
        ]
    }
})

我注入工厂的指令：

.directive('contentBox', function(dashboardContent) {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        templateUrl: '/modules/contentbox.html',
        link: function (scope, element) {
            scope.contentData = dashboardContent.contentBoxes;
            if (!$.isEmptyObject(scope.contentData.header)) {
                element.children('.content').prepend(
                    '<div class="content-header">' +
                        '<span class="content-title">' +
                            scope.contentData.header.title +
                        '</span>' +
                    '   <br/>' +
                    '</div>'
                );
                if (!$.isEmptyObject(scope.contentData.header.subtitle)) {
                    element.find('.content-header').append(
                        '<span class="content-author">' +
                            scope.contentData.header.subtitle +
                        '</span>'
                    );
                }
            }
        }
    }
})

在我看来，我试图像这样循环：

<content-box ng-repeat="content in contentData"></content-box>

在这种情况下，我需要使用什么表达方式？我无法从ng-repeat文档中了解这个表达式是如何工作的，我已经发现在“contentData中的内容”中，contentData指的是我的一组对象，但是第一个单词是什么（内容，正如我在这里设置的那样），它指的是什么？

另外，我是否正确设置了此范围？就像上面的代码一样：

scope.contentData = dashboardContent.contentBoxes;

我从中得到的输出是三个空的内容框，所以我猜它正在循环它，但没有数据打印在它们中 - 即{{contentData.boxTitle}}只返回空

在这种情况下我是否正确使用ng-repeat？

Answer 1

您将服务dashboardContent直接注入您的指令。这不是必需的。您可以将它注入控制器，使用ng-repeat访问单个数组元素并将其传递给您的指令。

mainApp.controller('ContentCtrl', function($scope, dashboardContent) { 
  $scope.contentData = dashboardContent.contentBoxes;
});

在你的指令代码中替换

scope: {}

与

scope: { contentData: '='}

并删除第scope.contentData=...行

这样你就会有一个带隔离范围的指令，你可以在你的html中将值传递给这个范围，如下所示：

<div ng-controller="ContentCtrl" ng-repeat="content in contentBoxes">
  <content-box contentData="content"></content-box>
</div>

Answer 2

Esa Toivola in the comment详细说明了我的具体问题的正确解决方案，但我想提一下角度ng-repeat如何工作，按照我原来的问题。

语法：

<div ng-repeat="content in contentData"></div>

在这种情况下：

contentData - 您正在使用的实际数组/数据

内容 - 您绑定的对象

所以继续你的继续：

<div ng-repeat="content in contentData">
    {{content.title}}
</div>

其中content是您输出的对象，title是其中一个参数。

ng-repeat中的表达如何起作用？

2 个答案: