Question

我正在为D＆amp; D风格RPG制作基于网络的角色创作工具。我正努力从我的firebase DB列出“Race”。目前的结构如下：

|-ironkingdoms
|--Race
|---Dwarf
|-----RaceName:Dwarf
|-----Starting Attribuites
|------PHY:7
|------STR:8
|------POI:5
|---Human
|-----RaceName:Human
|-----Starting Attributes
|------PHY:6
|------STR:7
|------POI:4

你明白了......我把“RaceName”放在那里因为我不能为我的生活弄清楚如何让它列出所有“Race”的孩子。这是我的代码：

http://plnkr.co/edit/GhQn1e9bdCdAnKNsJZ1K?p=preview

<html ng-app="myapp">
        <head>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js'></script>
            <script src='https://cdn.firebase.com/v0/firebase.js'></script>
            <script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script>
        </head>
        <body ng-controller="MainCtrl">
            Data:
            <div ng-repeat="item in data">{{item.RaceName}}</div>
            <p>
            <div>Data loaded: {{dataLoaded}}</div>
            <p>
            Messages:
            <div ng-repeat="msg in messages">{{msg}}</div>
            <script>
                var app = angular.module('myapp', ['firebase']);

                app.controller('MainCtrl', function($scope, $firebase) {
                  var ref = new Firebase("https://<yourFirebase>.firebaseio.com/Race");
                  $scope.data = $firebase(ref);
                  $scope.dataLoaded = "Not yet!";
                  $scope.messages = [];

                  $scope.data.$on("loaded", function() {
                    var keys = $scope.data.$getIndex();
                    ["Race"].forEach( function(element) {
                      $scope.messages.push("Test for " + element + ": " + (keys.indexOf(element) !== -1));
                    });
                    $scope.dataLoaded = "Yep!";
                  })
                });     
            </script>
        </body>
    </html>

到目前为止，当我使用“RaceName”时似乎工作正常，但是当我将/ Race从路径中取出并尝试列出“种族”的子项时，它似乎无效。我所掌握的小数据库知识来自SQL背景。所以这对我来说有点混乱。任何帮助，将不胜感激！

编辑：在我的问题中添加更多内容。不确定它会得到答案，但我宁愿不为此开始一个新的问题。

如何在以下情况下使用ng-repeat：

    <table>(Work in progress) Table with Rows of AttributeType with columns of AttributeGroup
  <thead>
    <tr>
      <th>Attribute Set</th>
      <th>Starting Attributes</th>
      <th>Hero Limit</th>
      <th>Veteran Limit</th>
      <th>Epic Limit</th>
    </tr>
  </thead>
  <tbody ng-model="refAttributes">
    <tr>
      <td>AGI</td>
      <td>{{refAttributes['Starting Attributes'].AGI}}</td>
      <td>{{refAttributes['Hero Limit'].AGI}}</td>
      <td>{{refAttributes['Veteran Limit'].AGI}}</td>
      <td>{{refAttributes['Epic Limit'].AGI}}</td>
    </tr>
    <tr>
      <td>ARC</td>
      <td>{{refAttributes['Starting Attributes'].ARC}}</td>
      <td>{{refAttributes['Hero Limit'].ARC}}</td>
      <td>{{refAttributes['Veteran Limit'].ARC}}</td>
      <td>{{refAttributes['Epic Limit'].ARC}}</td>
    </tr>
    <tr>
      <td>INT</td>
      <td>{{refAttributes['Starting Attributes'].INT}}</td>
      <td>{{refAttributes['Hero Limit'].INT}}</td>
      <td>{{refAttributes['Veteran Limit'].INT}}</td>
      <td>{{refAttributes['Epic Limit'].INT}}</td>
    </tr>
    <tr>
      <td>PER</td>
      <td>{{refAttributes['Starting Attributes'].PER}}</td>
      <td>{{refAttributes['Hero Limit'].PER}}</td>
      <td>{{refAttributes['Veteran Limit'].PER}}</td>
      <td>{{refAttributes['Epic Limit'].PER}}</td>
    </tr>
    <tr>
      <td>PHY</td>
      <td>{{refAttributes['Starting Attributes'].PHY}}</td>
      <td>{{refAttributes['Hero Limit'].PHY}}</td>
      <td>{{refAttributes['Veteran Limit'].PHY}}</td>
      <td>{{refAttributes['Epic Limit'].PHY}}</td>
    </tr>
    <tr>
      <td>POI</td>
      <td>{{refAttributes['Starting Attributes'].POI}}</td>
      <td>{{refAttributes['Hero Limit'].POI}}</td>
      <td>{{refAttributes['Veteran Limit'].POI}}</td>
      <td>{{refAttributes['Epic Limit'].POI}}</td>
    </tr>
    <tr>
      <td>PRW</td>
      <td>{{refAttributes['Starting Attributes'].PRW}}</td>
      <td>{{refAttributes['Hero Limit'].PRW}}</td>
      <td>{{refAttributes['Veteran Limit'].PRW}}</td>
      <td>{{refAttributes['Epic Limit'].PRW}}</td>
    </tr>
    <tr>
      <td>SPD</td>
      <td>{{refAttributes['Starting Attributes'].SPD}}</td>
      <td>{{refAttributes['Hero Limit'].SPD}}</td>
      <td>{{refAttributes['Veteran Limit'].SPD}}</td>
      <td>{{refAttributes['Epic Limit'].SPD}}</td>
    </tr>
    <tr>
      <td>STR</td>
      <td>{{refAttributes['Starting Attributes'].STR}}</td>
      <td>{{refAttributes['Hero Limit'].STR}}</td>
      <td>{{refAttributes['Veteran Limit'].STR}}</td>
      <td>{{refAttributes['Epic Limit'].STR}}</td>
    </tr>
  </tbody>
</table>

Answer 1

第9行应该成为

<div ng-repeat="(raceName, item) in data">{{raceName}}</div>

ngRepeat指令支持以上述方式获取密钥和值。

Answer 2

Dat Chu的回答肯定会让你获得比赛名称，但我想提出一个与你如何构建数据有关的替代方案。根据您的应用程序的最终大小，这可能是也可能不重要 - 如果您在/ Race位置下只有少量数据，那么这不是什么大问题。

您当前的结构需要下载所有比赛数据，包括子属性，以便列出所有比赛。另一种选择是在另一个位置存储一个简单的种族列表，比如ironkingsdoms.firebaseio.com/AvailableRaces/，它只有一个简单的种族名称数组。这将允许您只抓取该列表，将其显示给您的用户，然后他们可以选择一个竞赛，然后您可以构建针对/ Race / {racename} /的查询，并且只下拉该数据。

再次 - 如果你只有几场比赛并且整体对象大小很小，那么预先全部下载它可能并不坏（Firebase无论如何都会将它流式传输给你）。但是如果你最终遇到数百场比赛并且每场比赛都有一大堆数据，那么你可能会不必要地掏出你的火力基地带宽。

Firebase发布了一篇关于非规范化的好文章，你可能会觉得有趣@ https://www.firebase.com/blog/2013-04-12-denormalizing-is-normal.html

使用Angularfire从Firebase列出内容的更有效方法？

2 个答案: