2017-02-22 60 views
-2

嘗試從教程創建簡單的待辦事項應用程序。我試圖使用ng-repeat將firebase中的值顯示到表中。無法檢索「todo.activity」和「todo.notes」的值。這是我的代碼。Angular:無法顯示來自Firebase的數據


todo.html

<div class="row" ng-controller="TodoCtrl"> 
    <div class="col-md-5"> 
     <h3>Add an activity</h3> 
     <form ng-submit="addTodo()"> 
      <div class="form-group"> 
       <label for="activity">Activity</label> 
       <input type="text" class="form-control" id="activity" ng-model="activity" placeholder="activity"> 
      </div> 
      <div class="form-group"> 
       <label for="notes">Notes</label> 
       <input type="text" class="form-control" id="notes" ng-model="notes" placeholder="activity"> 
      </div> 

      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    <div class="col-md-7"> 
     <h3>Todo List</h3> 
     <table class="table table-striped"> 
      <thead> 
       <tr> 
        <th>Activity</th> 
        <th>Notes</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="todo in todos"> 
       <td>{{todo.activity}}</td> 
       <td>{{todo.notes}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

todo.js

'use strict'; 
    // Initialize Firebase 
    var config = { 
     apiKey: "AIzaSyAfjQC4qL7tMu37XA2z469jfLCrsMsHdAM", 
     authDomain: "todo-5a1c3.firebaseapp.com", 
     databaseURL: "https://todo-5a1c3.firebaseio.com", 
     storageBucket: "todo-5a1c3.appspot.com", 
     messagingSenderId: "636959211631" 
    }; 
    firebase.initializeApp(config); 
angular.module('myApp.todo', ['ngRoute']) 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/todo', { 
    templateUrl: 'todo/todo.html', 
    controller: 'TodoCtrl' 
    }); 
}]) 

.controller('TodoCtrl', ['$scope','$firebaseArray',function($scope,$firebaseArray) { 

    var rootRef = firebase.database().ref(); 
    $scope.todos = $firebaseArray(rootRef.child('todos')); 
    $scope.addTodo = function(){ 
    console.log("adding contact"); 

    $scope.todos.$add({ 
     activity: $scope.activity, 
     notes : $scope.notes 
    }).then(function(rootRef){ 
     var id = rootRef.key; 
     console.log('Added Contant '+id); 
     $scope.activity = ''; 
     $scope.notes = ''; 
    }); 
    } 

}]); 
+0

您需要至少提供一些信息來幫助你。 –

+0

@PritamBanerjee對不起歧義,我試圖使用'ng-repeat'在表格內使用'{{todo.activity}}'和'{{todo.notes}}'檢索firebase中的數據。 – ramsai

+0

In HTML中,數據的表格行將被行外的單元格關閉。這在語義上不正確。檢查HTML的這個區域,看看是否有幫助。 –

回答

1

你的NG-重複HTML是不正確。它應該是這樣的:

<tbody> 
    <tr ng-repeat="todo in todos"> 
     <td>{{todo.activity}}</td> 
     <td>{{todo.notes}}</td>    
    </tr> 
</tbody> 
+0

對不起,編輯了標籤,但不起作用 – ramsai