AngularJS ng-repeat zeigt kein JSON-Array

Question

Ich habe ein kleines Problem mit Angular ng-repet und einer JSON-Datei. Ng-repeat zeigt keinen Inhalt an.

Hier ist meine JSON-Datei (articles.json):

[ 
    {"id":"1", "name" : "Pizza Tobmes", "price" : 3.50}, 
    {"id":"2", "name" : "Pizza Freddy", "price" : 2.90}, 
    {"id":"3", "name" : "Pizza Unicorn", "price" : 6.66}, 
    {"id":"4", "name" : "Pizza Doppel Unicorn", "price" : 12.00}, 
    {"id":"5", "name" : "Schnitzel Unicorn", "price" : 15.33} 
] 

Hier ist mein HTML-Teil ist:

<table ng-controller="ArticlesCtrl as art"> 
 
    <th>Nr.</th> 
 
    <th>Name</th> 
 
    <th>Preis</th> 
 
    <tr ng-repeat="article in articles"> 
 

 
     <td>{{article.id}}</td> 
 
     <td>{{article.name}}</td> 
 
     <td>{{article.price | currency : '€ '}}</td> 
 
     <td><a href class="btn btn-default btn-sm" 
 
       >Hinzufügen</a></td> 
 
    </tr> 
 
</table>

Und endlich meine app.js

function() { 
 
    'use strict'; 
 
    angular.module('UnicornPizzaService', []) 
 
     .controller('ArticlesCtrl', function($scope, $http){ 
 
      $http.get('articles.json').then(function(response) { 
 
       $scope.articles = response.data; 
 
      }); 
 
     }); 
 
})();

Das einzige, was ich sehe, ist, die richtige Zahl "hinzufügen" -Buttons. Ich weiß nicht, was das Problem ist. Wie kann ich es beheben?

Answer 1

Sie verwenden ArticlesCtrl as art. Um auf Artikel im Bereich zugreifen zu können, müssen Sie ihm art voranstellen.

<table ng-controller="ArticlesCtrl as art"> 
    <th>Nr.</th> 
    <th>Name</th> 
    <th>Preis</th> 
    <tr ng-repeat="article in art.articles"> 

     <td>{{article.id}}</td> 
     <td>{{article.name}}</td> 
     <td>{{article.price | currency : '€ '}}</td> 
     <td><a href class="btn btn-default btn-sm" 
       >Hinzufügen</a></td> 
    </tr> 
</table> 

Answer 2

Sie fehlen art.articles in ng-repeat

testen

<table ng-controller="ArticlesCtrl as art"> 
    <th>Nr.</th> 
    <th>Name</th> 
    <th>Preis</th> 
    <tr ng-repeat="article in art.articles"> 

     <td>{{article.id}}</td> 
     <td>{{article.name}}</td> 
     <td>{{article.price | currency : '€ '}}</td> 
     <td><a href class="btn btn-default btn-sm" 
       >Hinzufügen</a></td> 
    </tr> 
</table> 

Answer 3

Dank an alle. Wenn ich dieses versuchen

<table ng-controller="ArticlesCtrl as art"> 
 
    <th>Nr.</th> 
 
    <th>Name</th> 
 
    <th>Preis</th> 
 
    <tr ng-repeat="article in art.articles"> 
 

 
     <td>{{article.id}}</td> 
 
     <td>{{article.name}}</td> 
 
     <td>{{article.price | currency : '€ '}}</td> 
 
     <td><a href class="btn btn-default btn-sm" 
 
       ng-click="cart.addArticle(article);">Hinzufügen</a></td> 
 
    </tr> 
 
</table>

nicht, daß ich nichts sehen. Selbst die Hinzufügen-Buttons sind weg. Wenn ich dieses versuchen

<table ng-controller="ArticlesCtrl"> 
 
    <th>Nr.</th> 
 
    <th>Name</th> 
 
    <th>Preis</th> 
 
    <tr ng-repeat="article in articles"> 
 

 
     <td>{{article.id}}</td> 
 
     <td>{{article.name}}</td> 
 
     <td>{{article.price | currency : '€ '}}</td> 
 
     <td><a href class="btn btn-default btn-sm" 
 
       ng-click="cart.addArticle(article);">Hinzufügen</a></td> 
 
    </tr> 
 
</table>

kann ich die "Hinzufügen" -Buttons wieder sehen.

Answer 4

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('ArticlesCtrl',function($scope) { 
 
    var vm = this; 
 
    vm.articles = [ 
 
    {"id":"1", "name" : "Pizza Tobmes", "price" : 3.50}, 
 
    {"id":"2", "name" : "Pizza Freddy", "price" : 2.90}, 
 
    {"id":"3", "name" : "Pizza Unicorn", "price" : 6.66}, 
 
    {"id":"4", "name" : "Pizza Doppel Unicorn", "price" : 12.00}, 
 
    {"id":"5", "name" : "Schnitzel Unicorn", "price" : 15.33} 
 
]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <table ng-controller="ArticlesCtrl as art"> 
 
    <tr> 
 
    <th>Nr.</th> 
 
    <th>Name</th> 
 
    <th>Preis</th> 
 
    </tr> 
 
    <tr ng-repeat="article in art.articles"> 
 
     <td>{{article.id}}</td> 
 
     <td>{{article.name}}</td> 
 
     <td>{{article.price | currency : '€ '}}</td> 
 
     <td><a href class="btn btn-default btn-sm" 
 
       >Hinzufügen</a></td> 
 
    </tr> 
 
</table> 
 
</div>