动态地捕获嵌套NG重复内部的firebase数据,以适用于我所处的任何对象



我正在在我正在构建的网站上创建一个博客功能,我创建了一个基本模板,管理员必须使用该模板来创建其发布。我遇到的问题是,我无法弄清楚如何在每个博客文章中动态获取列表项目并在另一个NG重复中显示它们。这是我的示例json in firebase

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

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

最新更新