Jquery数据表无法使用角度正确显示数据

时间:2017-10-04 04:16:56

标签: jquery html angularjs firebase-realtime-database angular-datatables

对数据表使用ng-repeat但输出有点奇怪。它显示数据,但后来表示没有要显示的记录。如果我尝试搜索,将它排序只是将表格清空。以下是我目前的代码,屏幕截图显示了我在桌面上的内容!

HTML

<table class="table table-bordered bordered table-striped table-condensed datatable" id="exTable" ui-jq="DataTable" ui-options="dataTableOpt">
     <thead class="lockedRecordsBg">
        <tr>
            <th>Equipment</th>
            <th>System</th>
            <th>Description</th>        
            <th>Group</th>
        </tr>
     </thead>
     <tbody>
        <tr data-ng-repeat = "equipments in data track by $index">
           <td>{{equipments.$id}}</td>
           <td>{{equipments.system}}</td>
           <td><p>{{equipments.description}}</p></td>
           <td>{{equipments.group}}</td>

           <td class="row">

                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <button data-toggle="modal" data-target="#editEquipment" class="edit btn cd-add-to-cart cd-add-to-cart:hover cd-add-to-cart:active col-md-5" title="Edit equipment" data-backdrop="false" data-ng-click="update($index)"><span class="fa fa-edit"></span></button>
                    </div>

                   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                       <button style="margin-left: 5px" id="delete_button1" class="delete btn cd-add-to-cart cd-add-to-cart:hover cd-add-to-cart:active col-md-5" title="Delete equipment" data-ng-click="update($index); deleteEquipment();"><span class="fa fa-trash-o"></span></button>
                    </div>




            </td> 
        </tr>
     </tbody>

  </table>

JS

    /*global angular*/
var app = angular.module('maintain', ['ngRoute', 'firebase','ui.bootstrap','ui.utils']);

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';
    $routeProvider.when('/maintain', {
        templateUrl: 'maintain/maintain.html',
        controller: 'maintainCtrl',
        resolve: {
          // controller will not be loaded until $waitForSignIn resolves
          // Auth refers to our $firebaseAuth wrapper in the factory below
          "currentAuth": ["Auth", function(Auth) {
            // $waitForSignIn returns a promise so the resolve waits for it to complete
            return Auth.$requireSignIn();
          }]
        }
    });
}]);

app.controller('maintainCtrl', ['$scope', '$firebaseObject', '$firebaseArray', 'toaster', function ($scope, $firebaseObject, $firebaseArray, toaster) {

    $scope.dataTableOpt = {
   //custom datatable options 
  // or load data through ajax call also
  "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
  };

var ref = firebase.database().ref();
        var data = ref.child("AllEquipments");
        var list = $firebaseArray(data);


        list.$loaded().then(function(data) {
            $scope.data = data;
            angular.forEach ($scope.data , function (d) {
            console.log(d);
        $scope.equipment1 = d.$id;
        angular.forEach (d.system, function (e) {
            $scope.system1 = e;
        })
    });
        }).catch(function(error) {
            $scope.error = error;
        });

}]);

这是我在$ scope.data 上使用ng-repeat后得到的结果 enter image description here

0 个答案:

没有答案