对数据表使用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;
});
}]);