ng-repeat 只显示数组的 2 个元素

Question

ng-repeat 仅显示数组的前 2 个元素（共有 25 个）。怎么了？

我是 Angular 的新手。我迷失了它的原因，控制台没有错误。有什么建议吗？

<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
    <li ng-repeat="post in posts" track by $index>
        <p>{{posts.data.children[$index].data.ups}}</p>
        <p>{{posts.data.children[$index].data.title}}</p>
    </li>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        var vm = this;
        vm.mydata = [];

        $http.get("http:/www.reddit.com/.json")
            .then(function(response) {
                vm.mydata = response.data;
                $scope.posts = vm.mydata;
                //console.log(vm.mydata);
                //console.table(vm.mydata);

            }, function(response) {
                $scope.posts = "Something went wrong";
            });
    });
</script>

最终代码更正。这是一个非常基本的脚本，用于管理在 Reddit 的首页中提取帖子并按投票降序显示。感谢大家的帮助！请参阅下面的代码：

    <!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!--  Framework:    AngularJs                                 -->
<!--  Author:       Vanessa Torres                            -->
<!--  Date:         March 30, 2016                            -->
<!--  Description:  Reddit's Front page posts extraction      -->
<!-- _________________________________________________________-->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
        <li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
            <p>{{post.data.ups}}</p>
            <p>{{post.data.title}}</p>
            <p>{{post.data.url}}</p>
        </li>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
            $scope.posts = [];

            $http.get("http:/www.reddit.com/.json")
                .then(function(response) {
                    $scope.posts = response.data;
                    console.table(vm.mydata);
                    // 
                }, function(response) {
                    $scope.posts = "Something went wrong";
                });
        });
    </script>
</body>

</html>

Answer 1

因为您正在遍历 posts，它基本上只有两个属性 ups 和 title

使用：

   <li ng-repeat="post in posts.data.children" track by $index>
        <p>{{post.data.ups}}</p>
        <p>{{post.title}}</p>
    </li>

Answer 2

HTML 应如下所示：

<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
  <li ng-repeat="post in posts track by $index">
    <p>{{post.data.children.data.ups}}</p>
    <p>{{post.data.children.data.title}}</p>
  </li>
</div>

这会在 posts 数组内部迭代，并显示每个 post 键（ups 和 title）的值。请查看 ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) 的文档以了解使用 track by $index.

的正确格式

作为基本编码标准，您无需将 var vm = this; 与 $scope 一起使用。如果您使用 vm 变量，那么在内部路由（或内部指令）中，您将每个路由（或指令）与控制器相关联，您可以添加一个额外的字段 controllerAs 来为控制器添加别名。在 HTML 代码中使用此别名来访问 vm 变量。在您的示例中，您可以按以下方式更改它：

<div ng-app="myApp" id="posts" ng-controller="myCtrl as postsCtrl">
  <li ng-repeat="post in postsCtrl.posts track by $index">
    <p>{{post.data.children.data.ups}}</p>
    <p>{{post.data.children.data.title}}</p>
  </li>
</div>

并且在脚本标签中：

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
  var vm = this;
  vm.posts = '';

  $http.get("http:/www.reddit.com/.json")
    .then(function(response) {
      vm.posts = response.data;
    }, function(response) {
      vm.posts = 'Something went wrong';
    });
});
</script>

ng-repeat 只显示数组的 2 个元素

ng-repeat only showing 2 elements of array

angularjs

angularjs-ng-repeat

reddit