ng-Wiederholung zeigt nur 2 Elemente des Arrays

Die ng-Wiederholung zeigt nur die ersten 2 Elemente des Arrays (es gibt 25). Was ist falsch?ng-Wiederholung zeigt nur 2 Elemente des Arrays

Ich bin ein Neuling mit Angular. Ich bin mit der Ursache davon verloren, keine Fehler in der Konsole. Irgendwelche Vorschläge?

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

Schlusscode korrigiert. Dies ist ein sehr einfaches Skript, um die Extraktion von Posts auf der Startseite des Reddits zu verwalten und sie in absteigender Reihenfolge nach Upvotes anzuzeigen. Danke Ihnen allen für Ihre Hilfe! Siehe Code unten:

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

Quelle

2016-03-30 Vanessa Torres

Bitte fügen Sie Ihre Array mit 25 Elementen. –

Können Sie Ihre Antwort posten? – Thangadurai

Verwenden Sie 'ng-repeat = "in posts.data.children" Post, da der Post nur 2 Felder enthält, während Sie tatsächlich die untergeordneten Knoten auflisten. –

Weil die Sie iterieren Beiträge die nur ups grundsätzlich zwei Eigenschaften haben und Titel

Verwendung:

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

Quelle

2016-03-30 06:18:36

vielen Dank! –

Nach Codierung Standards Antwort von @ Madhukar ist genauer – abhilash

Die HTML als sein sollte siehe unten:

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

Diese iteriert innerhalb des posts Arrays und der Wert jedes Post-Keys (ups und title) wird angezeigt. Bitte überprüfen Sie die Dokumentation für ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) für das korrekte Format der Verwendung von track by $index.

Als Standardcodierungsstandard müssen Sie var vm = this; zusammen mit $scope nicht verwenden. Wenn Sie die Variable vm verwenden, können Sie innerhalb von Routen (oder in Direktiven), in denen Sie jede Route (oder Anweisung) einem Controller zuordnen, ein zusätzliches Feld controllerAs zum Aliasing des Controllers hinzufügen. Verwenden Sie diesen Aliasnamen im HTML-Code, um auf die Variable vm zuzugreifen. In Ihrem Beispiel, können Sie es ändern, wie unten angegeben:

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

Und in dem Skripten tag:

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

Quelle

2016-03-30 06:32:03 Madhukar

vielen Dank! –

ng-Wiederholung zeigt nur 2 Elemente des Arrays

Antwort

Verwandte Themen