Question

我有一个由角度驱动的CRUD应用程序。最近我添加了数据表，以便使用数据表的功能搜索，过滤，排序，导出和隐藏列。不幸的是，当我使用任何数据表功能（例如搜索）时，它返回各个列{{contact.name}} {{contact.email}}中的Firebase引用（还有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将起作用，并且dataTables可以理解标记（或contacts数据）。要将其转换为angular-datatables（jQuery dataTables的angular指令），您唯一需要做的就是包含datatables依赖项并在标记中包含datatable指令：

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

演示 - ＆gt;的 http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview

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

1 个答案: