2017-02-22 16 views
-2

チュートリアルから簡単なTodoアプリケーションを作成しようとしています。 firebaseの値を表に表示するためにng-repeatを使用しようとしています。 "todo.activity"と "todo.notes"の値を取得することはできません。これまでのコードです。 角度:ファイアベースからのデータを表示できません

todo.js

<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.html


'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

関連する問題