动态抓取嵌套ng-repeat内的Firebase数据,无论我在哪个对象上

时间:2016-06-21 18:29:25

标签: javascript angularjs firebase firebase-realtime-database

我正在建立的网站上创建博客功能,我创建了一个管理员必须用来创建发布的基本模板。我遇到的问题是我无法弄清楚如何动态抓取每个博客帖子中的列表项并将其显示在另一个ng-repeat中。这是我在Firebase中的示例JSON

JSON

"pPosts": {
        "2015Newsletter": {
            "title": "2015 Newsletter",
            "subTitle": "Bringing Hope to Families in Iquitos, Peru",
            "datePosted": "6/21/16",
            "paragraph1": "random text.",
            "listTitle1": "Other Highlights of 2015 Trip",
            "subListTitle1": "",
            "listItem1s": {
                "list1Item1": "Meen for 2016!",
                "list1Item2": "Buonsored children",
                "list1Item3": "Worector, Violeta",
                "list1Item4": "Gi needy families",
                "list1Item5": "Prfamily business",
                "list1Item6": "Pu a family bakery business",
                "list1Item7": "Suing party",
                "list1Item8": "Tehildren",
                "list1Item9": "Scd Animal Rescue Center.",
                "list1Item10": "Serusalen School.",
                "list1Item11": "Adren.",
                "list1Item12": "",
                "list1Item13": "",
                "list1Item14": "",
                "list1Item15": "",
                "list1Item16": "",
                "list1Item17": "",
                "list1Item18": "",
                "list1Item19": "",
                "list1Item20": ""
            },
            "listTitle2": "Be an active pa",

我最多支持20个列表项,并且不想在我的控制器中指定child("2015Newsletter"),因为会有多个帖子,我不想编写代码每次管理员创建帖子。这是我的控制器

Javascript控制器

bridgeTheGapControllers.controller('presidentsPageCtrl', function($scope, $firebaseArray, $firebaseObject) {
    var ref = new Firebase("firebaseUrl");
    //first layer post info
    $scope.postsNum = $firebaseArray(ref.child('pPosts'));
    //THIS DOES NOT WORK
    $scope.listItem1s = $firebaseArray(ref.child('pPosts').child('listItem1s'));

});

HTML

<div class="blog-item" ng-repeat="post in postsNum">
                        <img class="img-responsive img-rounded" src="{{ post.imageOne }}" width="100%" alt="" />
                        <div class="blog-content">
                            <a href="blog-item.html"><h3>{{ post.title }}</h3></a>
                            <h4>{{ post.subTitle }}</h4>
                            <div class="entry-meta">
                                <span><i class="fa fa-user"></i> {{ post.postedBy }}</span>
                                <span><i class="fa fa-folder"></i> {{ post.category1 }} {{ post.category2 }} {{ post.category3 }}</span>
                                <span><i class="fa fa-calendar"></i> {{ post.datePosted }}</span>
                            </div>
                            <p>{{ post.paragraph1 }}</p>                            

                            <h4>{{ post.listTitle1 }}</h4>
                            <ul>
                                <li ng-repeat="listItem in listItem1s">{{ listItem.listItem}}</li>
                            </ul>
                            <hr>

                        </div>
                    </div><!--/.blog-item-->

也许我认为这完全错了,但似乎有一种方法可以在我的控制器中做这样的事情$scope.listItem1s = $firebaseArray(ref.child('pPosts').child(INDEX FOR WHATEVER POST IM IN).child('listItem1s');

1 个答案:

答案 0 :(得分:2)

您不会需要额外的$firebaseArray

请确保在内部ng-repeat中执行逻辑。

<li ng-repeat="listItem in postsNum.post.listItem1s">

控制器

bridgeTheGapControllers.controller('presidentsPageCtrl', function($scope, $firebaseArray, $firebaseObject) {
    var ref = new Firebase("firebaseUrl");
    //first layer post info
    $scope.postsNum = $firebaseArray(ref.child('pPosts'));
});

HTML

<div class="blog-item" ng-repeat="post in postsNum">
    <img class="img-responsive img-rounded" src="{{ post.imageOne }}" width="100%" alt="" />
    <div class="blog-content">
        <a href="blog-item.html"><h3>{{ post.title }}</h3></a>
        <h4>{{ post.subTitle }}</h4>
        <div class="entry-meta">
            <span><i class="fa fa-user"></i> {{ post.postedBy }}</span>
            <span><i class="fa fa-folder"></i> {{ post.category1 }} {{ post.category2 }} {{ post.category3 }}</span>
            <span><i class="fa fa-calendar"></i> {{ post.datePosted }}</span>
        </div>
        <p>{{ post.paragraph1 }}</p>                            

        <h4>{{ post.listTitle1 }}</h4>
        <ul>
            <li ng-repeat="listItem in postsNum.post.listItem1s">{{postsNum.post.listItem1s.listItem}}</li>
        </ul>
        <hr>
    </div>
</div><!--/.blog-item-->
相关问题