无法使用ng-repeat实现firebaseArray

时间:2016-04-10 17:50:21

标签: javascript html angularjs firebase angularfire

我正在尝试使用$ 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);
        }
      });
  });

0 个答案:

没有答案