3

ng-repeat を使用して、オブジェクトの配列をループする方法を見つけようとしています。

次のようにファクトリをセットアップしました。3 つのセットのデータが含まれています。

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;

これから取得している出力は 3 つの空のコンテンツ ボックスであるため、ループしていると推測していますが、データは出力されていません。つまり、{{contentData.boxTitle}} は空を返すだけです。

この状況で ng-repeat を正しく使用していますか?

4

2 に答える 2

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 はそのパラメーターの 1 つです。

于 2013-07-05T11:29:29.117 に答える