如何在HTML表上使用多级键显示Firebase数据？

Question

我在使用Angular从Firebase数据库使用HTML表格的多级键显示数据时遇到了麻烦。

我有这样的数据：

我试图用ng-view ，结果如下：

我的控制器：

.controller('SalesCtrl', ['$scope', '$firebaseArray', '$firebaseObject', function($scope, $firebaseArray, $firebaseObject) {

    console.log('Sales Controller loaded..');
    var ref = firebase.database().ref("pelanggan/sales01");

    var list = $firebaseObject(ref);

    list.$loaded().then(function() {
        $scope.list = [];
        angular.forEach(list, function(value,key){
            $scope.list.push({ id: key, data: value})
        });
    });

我尝试使用ng-repeat和ng-repeat-start.等不同方法来渲染它ng-repeat-start. 我对为什么我的桌子上得到JSON格式感到困惑。

我想以上述格式显示数据：

-------------------------------------------------------------
| alamat         | email        | identitas      | layanan  |
-------------------------------------------------------------
| jl.prapanca... | xx@email.com | 12345          | xxxxxxxx |
-------------------------------------------------------------

Answer 1

我认为部分问题是ng-repeat-start和ng-repeat-end是针对这种情况的错误工具。 根据我的日常工作，我发现，如果您在HTML表上进行操作，则最好使用更基本的ng-repeat设置。

<table>
  <thead>
    <tr>
      <td>alamat</td>
      <td>email</td>
      <td>identitas</td>
      <td>layanan</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in list">
      <td>{{item.alamat}}</td>
      <td>{{item.email}}</td>
      <td>{{item.identitas}}</td>
      <td>{{item.layanan}}</td>
    </tr>
  </tbody>
</table>

我这样说的原因是，如果您查看ng-repeat的Angular文档 ，就会发现，尽管特殊的ng-repeat-start和ng-repeat-end点可用于表中的特殊用途，它们对<div>s更有帮助。

由于无论如何都以JSON形式返回数据，因此您可以简单地引用相关属性并将它们放在正确的位置。

如果您要尝试在“优雅”设置中动态呈现表格，那么我不确定是否可以很轻松地将其实现。 不过，我不知道您在做什么。 因此，我建议您可以采用的最简单的方法是ng-repeat 。

Answer 2

我只是用以下方法解决了它。

在我的控制器中，我更改为：

var ref = firebase.database().ref().child("pelanggan").child("sales01");
$scope.sales = $firebaseArray(ref); 
var data = $firebaseArray(ref); 
$scope.info = $scope.sales 
console.log("info: "+data.length);

在我看来：

<div class="row" ng-controller="SalesCtrl">
<!-- <div class="row" ng-controller="singlePelangganController"> -->

<div class="col-md-5" ng-show="addSalesFormShow">
    <h3>Add Sales</h3>
    <form ng-submit="addSales()">
      <div class="form-group">
        <label>Alamat</label>
        <input type="text" class="form-control" ng-model="alamat" placeholder="Alamat" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>Identitas</label>
        <input type="text" class="form-control" ng-model="identitas" placeholder="Identitas" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Nama</label>
        <input type="text" class="form-control" ng-model="nama" placeholder="Nama" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <!-- <button type="cancel" class="btn btn-default" onclick='resetForm()'>Cancel</button> -->
    </form>
</div>

<div class="col-md-5" ng-show="editSalesFormShow">
    <h3>Edit Sales</h3>
    <form ng-submit="editSales()">
      <div class="form-group">
        <label>Alamat</label>
        <input type="text" class="form-control" ng-model="alamat" placeholder="Alamat" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Nama</label>
        <input type="text" class="form-control" ng-model="nama" placeholder="Nama" required="">
      </div>

      <div class="form-group">
        <label>No Handphone</label>
        <input type="text" class="form-control" ng-model="phone" placeholder="Phone" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <button type="cancel" class="btn btn-danger">Cancel</button>
    </form>
</div>

<div class="col-md-7">
    <h3>Sales</h3>

    <table class="table table-striped hoverTable" data-ng-controller="SalesCtrl">
        <thead>
            <tr>
                <th>Alamat</th>
                <th>Email</th>
                <th>Identitas</th>
                <th>lo</th>
                <th>lt</th>
                <th>Nama</th>
                <th>Phone</th>
                <th></th>
            </tr>   
        </thead>
        <tbody data-ng-repeat="sales in sales">
             <tr>
                <td>{{sales.alamat}}</td>
                <td>{{sales.email}}</td>
                <td>{{sales.identitas}}</td>
                <td>{{sales.lo}}</td>
                <td>{{sales.lt}}</td>
                <td>{{sales.nama}}</td>
                <td>{{sales.noHP}}</td>
                <td><a class="btn btn-success" ng-click="showEditSalesForm(sales)">Edit</a></td>
            <td><a class="btn btn-danger" ng-click="removeSales(sales)">Delete</a></td>
             </tr>





        </tbody>
    </table>
</div>

</div>