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

Question

I am having trouble with displaying data from a Firebase database with a multi-level key to an HTML table, using Angular.

I have data like this:

I have tried to display with ng-view , the result like this:

My Controller:

.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})
        });
    });

I have tried to render it with different methods like ng-repeat and ng-repeat-start. I am confused as to why I get JSON format on my table.

I would like to display the data with format like above:

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

Answer 1

I think part of the problem is that ng-repeat-start and ng-repeat-end are the wrong tools for the situation. Based on my day-to-day work, I've found that if you're operating on an HTML table, a more basic ng-repeat setup is preferable.

<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>

The reason I say this, is that if you look at the Angular documentation for ng-repeat , you'll find that, while the special ng-repeat-start and ng-repeat-end points can be used for special purposes in tables, they're more helpful for <div>s .

Since you're getting the data back as JSON anyhow, you can simply reference the relevant properties and put them in the right place by hand.

If you're trying for an 'elegant' setup where you're dynamically rendering the table, I'm not sure you'll be able to pull that off very easily. I don't know the requirements of what you're working on, though. Thus, I suggest the easiest path you can take, which is a plain ng-repeat .

Answer 2

I just have solved it with the following.

In my Controller I change to:

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

And in my view:

<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>