3

我试图弄清楚如何使用 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 ？

4

2 回答 2

2

您正在将您的服务dashboardContent直接注入您的指令中。这不是必需的。Insted 你可以将它注入你的控制器，访问单个数组元素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>
于 2013-07-05T09:27:37.070 回答
1

Esa Toivola 在评论中详细说明了针对我的具体问题的正确解决方案，但我想根据我最初的问题提及 angular ng-repeat 的工作原理。

在语法中：

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

在这个情况下：

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

content - 你要绑定的对象

因此，您将继续：

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

其中 content 是您要输出的对象，而 title 是它的参数之一。

于 2013-07-05T11:29:29.117 回答