我正在尝试使用$ firebaseArray()在firebase和ng-table之间建立同步连接。不幸的是,它对我不起作用。我试图像它们在文档中显示的那样实现它。我已经分享了下面的相关代码。请帮助我。有什么想法吗?
任何帮助将不胜感激。
<div class="box-body">
<div ng-app="myApp" ng-cloak>
<div ng-controller="eventController">
<div ng-table="tableParams" class="table">
<tbody>
<tr ng-repeat="user in userData">
<td title="Serial Number">
{{$index+1}}
</td>
<td title="User ID">
<div ng-hide="editingData[$index]">{{user.ID}}</div>
<div ng-show="editingData[$index]"><input id="userID" type="text" ng-model="user.ID"></div>
</td>
<td title="User Name">
<div ng-hide="editingData[$index]">{{user.name}}</div>
<div ng-show="editingData[$index]"><input id="userName" type="text" ng-model="user.name"></div>
</td>
<td title="User Information">
<div ng-hide="editingData[$index]">{{user.someOtherInfo}}</div>
<div ng-show="editingData[$index]"><input id="userSomeOtherInfo"type="text" ng-model="user.someOtherInfo"></div>
</td>
<button ng-click="data.$remove(user)"><span class="glyphicon glyphicon-trash"></span></button>
<button ng-click="modifyData($index)"><span class="glyphicon glyphicon-pencil"></span></button>
<button ng-show="editingData[$index]" ng-click="update($index)"><span class="glyphicon glyphicon-ok"></span></button>
<button ng-show="editingData[$index]" ng-click="cancel($index)"><span class="glyphicon glyphicon-remove"></span></button>
</tr>
</tbody>
</div>
</div>
</div>
</div>
Javascript代码如下
var myApp = angular.module("myApp", ["firebase","ngTable"]);
myApp.controller('eventController', function($scope,$firebaseArray,$firebaseObject,$firebase,ngTableParams){
var fb = new Firebase('https://eventproject.firebaseio.com/');
$scope.userData = $firebaseArray(fb);
console.log('firebaseArray'+$firebaseArray(fb));
console.log("data"+$scope.userData);
var backupID;
var backupName;
var backupSomeOtherInfo;
console.log('length of data:'+$scope.userData.length);
for (var i = 0, length = $scope.userData.length; i < length; i++) {
$scope.editingData[i] = false;
}
$scope.modifyData= function (ind) {
backupID = document.getElementById('userID').value;
backupName = document.getElementById('userName').value;
backupSomeOtherInfo = document.getElementById('userSomeOtherInfo').value;
$scope.editingData[ind] = true;
};
$scope.update = function (ind) {
var ID = document.getElementById('userID').value;
var name = document.getElementById('userName').value;
var someOtherInfo = document.getElementById('userSomeOtherInfo').value;
$scope.editingData[ind] = false;
};
$scope.cancel = function (ind) {
document.getElementById('userID').value=backupID;
document.getElementById('userName').value=backupName;
document.getElementById('userSomeOtherInfo').value=backupSomeOtherInfo;
$scope.editingData[ind] = false;
};
$scope.tableParams=new ngTableParams({},
{
getData: function ($defer, params) {
$defer.resolve($scope.userData);
}
});
});