Как отображать данные Firebase с многоуровневым ключом в таблице HTML?

Question

У меня возникли проблемы с отображением данных из базы данных Firebase с помощью многоуровневого ключа в таблицу HTML, используя Angular.

У меня есть данные, как это:

Я попытался отобразить с 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 a nd 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> 

Причина, почему я говорю об этом, в том, что если вы посмотрите на the Angular documentation for ng-repeat, вы обнаружите, что, в то время как специальные ng-repeat-start и ng-repeat-end очки могут быть использованы для специальных целей в таблицах, они более полезны для <div>s ,

Поскольку вы так или иначе получаете данные как JSON, вы можете просто ссылаться на соответствующие свойства и поместить их в нужное место вручную.

Если вы пытаетесь создать «элегантную» настройку, в которой вы динамически визуализируете таблицу, я не уверен, что вы сможете легко ее снять. Хотя я не знаю требований того, над чем вы работаете. Таким образом, я предлагаю самый простой путь, который вы можете взять, который является простым ng-repeat.

Answer 2

Спасибо Andrew Gray за ответ, это мой сценарий для рендеринга:

<tbody> 
<tr ng-repeat-start="(key, prop) in list"> 
<td>{{prop}}</td> 
<tr ng-repeat-end></tr> 
</tbody> 

я получил результат в формате JSON как указано выше:

{"id":"sales01","data":{"1234567893":{"alamat":"Jl. Prapanca Raya No. 7 Jakarta Selatan","email":"een.cyber23@gmail.com","identitas":"1234567893","layanan":"Indihome 1","lo":-6.262908333333333,"lt":10,"nama":"Endang","noHp":"08456213334"},"1234567894":{"alamat":"Jl. Mampang Prapatan","email":"gugi.pratama@gmail.com","identitas":"1234567894","layanan":"Indihome 1","lo":-6.262908333333333,"lt":10,"nama":"Gugi Pratama","noHp":"0216464789"}}} 

Мне нужно указать каждое значение в столбце.

Answer 3

Я решил это с помощью: a. В моем контроллере я изменяю:

вар исх = firebase.database() реф() ребенка ("pelanggan") ребенка ("sales01");...

$ scope.sales = $ firebaseArray (ref); var data = $ firebaseArray (ref); $ scope.info = $ scope.sales console.log ("info:" + data.длина);

И на мой взгляд:

->

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

И еще раз, я хотел бы сказать спасибо за быстрый ответ :) Happy Code