ng-repeat, показывающий только 2 элемента массива

ng-repeat показывает только первые 2 элемента массива (их 25). Что не так?ng-repeat, показывающий только 2 элемента массива

Я новичок с угловым. Я потерял причину этого, никаких ошибок в консоли. Какие-либо предложения?

<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 и отображением его в порядке убывания по upvotes. Спасибо за вашу помощь! Смотрите ниже код:

<!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>

источник

2016-03-30 Vanessa Torres

Пожалуйста, добавьте массив с 25 элементами. –

Можете ли вы опубликовать свой ответ? – Thangadurai

использовать 'ng-repeat =" сообщение в posts.data.children "' coz сообщение имеет только 2 поля, тогда как вы на самом деле перечисляете дочерние узлы. –

Потому что вы Перебор сообщения, которые имеют в основном два свойства только взлеты и название

Использование:

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

источник

2016-03-30 06:18:36

большое спасибо! –

Согласно стандарту кодирования ответ by @madhukar более точный – abhilash

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, и отображается значение каждого почтового ключа (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>

источник

2016-03-30 06:32:03 Madhukar

большое спасибо! –

ng-repeat, показывающий только 2 элемента массива

ответ

Смежные вопросы