ng-repeat仅显示最后一项

时间:2015-05-12 05:51:04

标签: javascript angularjs lodash

我知道这可能是我的错误。

我收到一个包含WordPress帖子的JSON对象,但是当我尝试在DOM中呈现这些帖子时,列表中唯一的12次帖子是最后一项

<div ng-repeat="post in posts">

    <h2 ng-bind-html="post.title"></h2>
    <p>{{:: post.date | date}}</p>

</div>

控制器

$scope.posts = [];

$scope.doRefresh = function() {
  $scope.posts = FreshlyPressed.getBlogs($scope);
  $scope.$broadcast('scroll.refreshComplete');
}
$scope.doRefresh();

服务

.service('FreshlyPressed', function($http, $q) {
 return {

getBlogs: function($scope) {
  var posts = [];
  $http.get('http://urbanetradio.com/wp-json/posts')
    .success(function(result) {
      _.each(result, function(posts) {
          console.log(posts.title);
          $scope.posts = posts;
        });
      })
    }
});

2 个答案:

答案 0 :(得分:1)

您应该在post内使用ng-repeatpost将成为posts内的单个对象。

<div ng-repeat="post in posts">

    <h2 ng-bind-html="post.title"></h2>
    <!--              ^^^^          -->
    <p>{{:: post.date | date}}</p>
    <!--    ^^^^               -->
</div>

参考文档:https://docs.angularjs.org/api/ng/directive/ngRepeat

答案 1 :(得分:1)

_.each(result, function(posts) {
   console.log(posts.title);
   $scope.posts = posts;
});

这就是错误所在。 Lodash遍历帖子并且每次都将$ scope.posts分配给一个帖子,这就是为什么你得到最后一个帖子。

尝试:

$http.get('http://urbanetradio.com/wp-json/posts')
.success(function(result) {
    $scope.posts = result;
  })
}