Angular ng-repeat 不适用于从 mongodb 获取的数据答案

【问题标题】：Angular ng-repeat doesn't work with data fetched from mongodbAngular ng-repeat 不适用于从 mongodb 获取的数据
【发布时间】：2015-09-18 18:41:19
【问题描述】：

我是 Web 开发的新手。如果这是一个愚蠢的问题，我为此道歉。我的 ng-repeat 没有显示从 mongodb 获取的 JSON，但是当我传递本地 JSON 时它可以工作。我为此奋斗了一整天。谁能告诉我出了什么问题？

这是我的 Angular 代码

(function(){
  var app = angular.module('app', ['ngRoute']);
  app.controller('CommentController', ['$scope', '$http', function($scope, $http){

//I've tried 'this.comment', it still not work.
//It works when I use a test local JSON'this.comment = [{Visitor: 123, Comment: 345, CreateDate: 879}, {Visitor: 123, Comment: 345, CreateDate: 879}]
    $scope.comment = 
    $http({url: 'db-comments'}).success(function (comments) {

//I've confirmed 'comments' is an array of the JSON objects which I want.

      return comments;
    });
  }]);
})();

这是我的 HTML 代码

<div id="home" class="container" ng-controller='CommentController as comments'>
  <div id="comment" ng-repeat="x in comments.comment">
    <h2>{{x.Visitor}}</h2>
    <hr>
    <p>{{x.Comment}}<p>
    <span>{{x.CreateDate}}</span>
    <hr>
  </div>
</div>

这是我的 node.js 代码

router.get('/db-comments', function(req, res, next){
  Comment.find(function(err, data){
    if(err){
        console.log('can not fetch the data')
    }
    res.send(data);
  })
});

提前致谢！

【问题讨论】：

标签： javascript angularjs node.js mongodb ng-repeat

【解决方案1】：

正如 scottseeker 所指出的，您需要将 http 响应数据分配给您的变量，而不是 promise。

但是，因为您使用的是 controller as 语法，所以这还不足以让您的示例正常工作。您需要设置this.comment 而不是$scope.comment。首先，您可能想编写如下内容：

$http(...).success(function (comments) {
    this.comment = comments;  // don't write that
});

但请注意，回调中的关键字this 与外部引用的this 不同。因此，如果你使用 controller as 语法，请养成在控制器开头写var vm = this; 的习惯，并在vm 中设置要绑定到视图的变量（vm代表视图模型）。像这样：

app.controller('CommentController', ['$http', function ($http) {
    var vm = this;

    $http({url: 'db-comments'}).success(function (comments) {
        vm.comment = comments;
    });
}]);

附带说明，如果您没有为$http 调用设置特定的标头，我建议您使用简短的方法$http.get。这更具可读性：

$http.get('db-comments').success(...)

【讨论】：

【解决方案2】：

$http 返回一个承诺，在 'then' 部分设置你的范围变量。

例子：

       $http({url: 'db-comments'})
       then(function(response) {                    
          $scope.comment = response.data.
       }, function(response) {                  
          console.log('error: ' + response.error);
       });

【讨论】：

【解决方案3】：

我真的不知道 $http 服务在 AngularJS 上是如何工作的，但我猜它会返回一个承诺，对吧？

虽然我对 Promise 不是很熟悉，但我建议你这样做：

(function() {
var app = angular.module('app', ['ngRoute']);
app.controller('CommentController', ['$scope', '$http', function($scope, $http) {

  $http({
    url: 'db-comments'
  }).success(function(response) {

      // Bind the variable here
      $scope.comment = response.data;

    });
  }]);
})();

我希望这对你有用，如果没有，请告诉我。祝你好运！

【讨论】：