【问题标题】:Angular: Not able to display data from firebase [closed]Angular:无法显示来自firebase的数据[关闭]
【发布时间】:2017-07-13 06:16:07
【问题描述】:

尝试根据教程创建一个简单的待办事项应用程序。我正在尝试使用 ng-repeat 将 firebase 中的值显示到表格中。无法检索“todo.activity”和“todo.notes”的值。这是我目前的代码。


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 = '';
    });
  }

}]);

【问题讨论】:

  • 您至少需要向我们提供一些信息来帮助您。
  • @PritamBanerjee 嘿,对于歧义,我正在尝试从 firebase 检索数据,使用 {{todo.activity}}{{todo.notes}} 在使用 ng-repeat 的表中检索数据
  • 在 HTML 中,数据的表格行与行外的单元格一起关闭。这在语义上是不正确的。查看 HTML 的那个区域,看看是否有帮助。

标签: javascript angularjs firebase angularjs-ng-repeat


【解决方案1】:

您的 ng-repeat html 不正确。应该是这样的:

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

【讨论】:

  • 对不起,编辑了 标签但也不起作用
猜你喜欢
  • 2017-11-20
  • 2021-12-03
  • 2016-11-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多