在嵌套的 ng-repeat 中为我所在的任何对象动态抓取 Firebase 数据

Question

我正在我正在构建的网站上创建博客功能，我创建了一个基本模板，管理员必须使用该模板来创建他们的 posting。我遇到的问题是我不知道如何动态抓取每个博客 posting 中的列表项并将它们显示在另一个 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")，因为会有多个 posting 而我不不想每次管理员创建 post 时都必须编写代码。这是我的控制器

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');

Answer 1

您不需要额外的 $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-->

在嵌套的 ng-repeat 中为我所在的任何对象动态抓取 Firebase 数据

Dynamically grabbing Firebase data inside nested ng-repeat for whatever object I am on

javascript

angularjs

firebase

firebase-realtime-database

控制器

HTML