使用 Firebase 搜索、过滤和导出数据表

Question

我有一个由 Angular 驱动的 CRUD 应用程序。最近我向它添加了数据表，以便使用数据表的功能来搜索、过滤、排序、导出和隐藏列。不幸的是，当我使用任何数据表功能（例如搜索）时，它会返回各个列中的 Firebase 引用 {{contact.name}} {{contact.email}}（还有 4 列），它会返回 Firebase 引用而不是字段。有没有办法解决这个问题？我真的需要这些数据表功能同时使用 Firebase。

$(document).ready(function() {
    $('#contacts').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

<table id="contacts" class="table table-striped table-hover" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Area</th>
      <th>Occupation</th>
      <th>E-mail</th>
	  <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts">
      <td>{{contact.name}}</td>
      <td>{{contact.phone}}</td>
      <td>{{contact.area}}</td>
      <td>{{contact.work}}</td>
      <td>{{contact.email}}</td>
      <td><a href="#/edit/{{contact.$id}}" class="btn btn-raised btn-xs btn-warning">Edit</a> <a class="btn btn-raised btn-xs btn-danger" ng-click="removeContact(contact.$id)">Delete</a></td>

    </tr>
  </tbody>
</table>

编辑

将通过 ajax 获取数据来解决这个问题。这是我从 ajax GET 请求中得到的 json 格式

{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254711777734","work":"ttt"},"-KId6OC2gOwiacUid9yK":{"area":"dfgdfg","email":"dfgdf","name":"dfg","phone":"dfgdfg","work":"fdfffffff"},"-KId6Rqo0B6w0jACHhWM":{"area":"dfgdfgdfgdf","email":"dfgdfgdfgdfg","name":"dfgfdgdf","phone":"gdfgdfgdfg","work":"gdfgdfgdfgdfg"},"-KIqmYZubPYhAqDqEyWo":{"area":"dfgfdg","email":"fgfdgfdgdf","name":"fgfg","phone":"fdgdg","work":"fgdfgdf"},"-KIqn5QABMXrTGoVgQv1":{"area":"bla","email":"weadasda","name":"bla","phone":"bla","work":"bla"}}

这就是数据在控制台上的样子。

任何使用数据表的帮助都将得到应用。

FireBase database image

Answer 1

所以，这个问题实际上是关于将具有未知对象条目名称（例如 KId6Rqo0B6w0jACHhWM）的对象的（firebase）JSON 对象转换为可以与 dataTables 和 ng-repeat 一起使用的更简单的结构？

您可以通过这种方式将contacts 格式化为一个普通对象数组：

$http.get('firebase.json').then(function(json) { //faked response from firebase
  $scope.contacts = []
  for (var item in json.data) {
    $scope.contacts.push(json.data[item]) 
  }
}) 

现在ng-repeat 将起作用，并且标记（或contacts 数据）对于数据表来说是可以理解的。要将其转换为 angular-datatables（jQuery dataTables 的角度指令），您唯一需要做的就是包含 datatables 依赖项并在标记中包含 datatable 指令：

<table datatable="ng" class="table table-striped table-hover" >

演示 -> http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview