如何通过AngularFire $ asObject或$ asArray返回特定的项目列表

时间:2014-09-03 21:23:05

标签: angularjs firebase angularfire

我正在尝试使用新方法$ asObject或$ asArray以及博客文章Denormalizing Your Data is Normal中推荐的数据结构来学习Firebase AngularFire。

假设我有列表和项目的数据,我想返回特定列表中包含的所有项目。

FIREBASE ROOT:有两个位置:1)列表,2)项目

    {
  "items" : {
    "itemid1" : {
      "isonlist" : {
        "listid3" : true
      },
      "itemname" : "itemA"
    },
    "itemid2" : {
      "isonlist" : {
        "listid3" : true
      },
      "itemname" : "itemB"
    },
    "itemid3" : {
      "itemname" : "itemC"
    },
    "itemid4" : {
      "itemname" : "itemD"
    }
  },
  "lists" : {
    "listid1" : {
      "listtitle" : "ListA"
    },
    "listid2" : {
      "listtitle" : "ListB"
    },
    "listid3" : {
      "listitems" : {
        "itemid1" : true,
        "itemid2" : true
      },
      "listtitle" : "ListC"
    },
    "listid4" : {
      "listtitle" : "ListD"
    }
  }
}

这是我的代码:

<html ng-app="appListsOfItems">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>  
</head>

<body ng-controller="myCtrl">

<h1>Lists of Items</h1>
<b>Write out the title of this list: </b>
<div ng-model="list">{{list.listtitle}}</div>

<b>Write each of the itemids for this list - (isonlist):</b>
<div ng-repeat="(lid, li) in list.listitems">
{{lid}} | {{li}}
</div>

<b>Write the itemname for each of the items for this list:</b>
<div ng-repeat="(iid, i) in items">
{{iid}} | {{i.$id}} | {{i.itemname}}
</div>

<script>
    var app = angular.module("appListsOfItems", ["firebase"]);

    app.controller("myCtrl", 
        function($scope, $firebase) {

            // Create firebase reference to a specific list 'listid3'
            var listRef = new Firebase("https://xxxxx.firebaseio.com/lists/listid3");

            // Assign the firebase reference to an angularfire object using the new $asObject method
            var objList = $firebase(listRef).$asObject();
            //Bind the object to scope and give it a name using the new $bindTo method
            objList.$bindTo($scope, "list");
            console.log(objList);

            // Get the item name of each of the items on the list 'listid3'
            // !!! THIS IS NOT WHAT I WANT. THIS RETURNS ALL ITEMS.
            var refItems = new Firebase("https://xxxxx.firebaseio.com/items");
            var arrayItems = $firebase(refItems).$asArray();
            $scope.items = arrayItems;
            console.log(arrayItems);

        }
    );

</script>
</body>
</html>

此代码呈现:

项目清单

写出这份清单的标题:

ListC

写下此列表的每个itemid - (isonlist):

itemid1 |真

itemid2 |真

为此列表的每个项目写下项目名称:

0 | itemid1 |意达

1 | itemid2 | itemB

2 | itemid3 | itemC

3 | itemid4 | itemD

===========================================

ISSUE:$ scope.items = arrayItems返回“items”位置中的所有项目。

问题:如何为“listid3”中包含的项目写出“itemname”

EXCEPTED RESULT(写出列表“listid3”中每个项目的项目名称):

0 | itemid1 |的意达

1 | itemid2 |的 itemB

1 个答案:

答案 0 :(得分:2)

您正在尝试加入两个数据位置:listsitems

Firebase中没有对此类JOIN的内置支持,也没有返回AngularFire中的子集的数组。

您必须自己编写(例如,使用once检索列表中的每个项目)或使用来自Kato的Firebase-util库的joinhttps://github.com/firebase/firebase-util/tree/master/src/join

另请参阅&#34; How to filter a synchronized array?&#34;,其中包含相同的主题。