AngularJS ng-repeatはJSON配列を表示しません

Question

Angular ng-repaetとJSON-fileには少し問題があります。 Ng-repeatは内容を表示しません。

ここに私のJSONファイル（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} 
] 

ここでは私のHTMLの一部です：

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

そしてfinaly私app.js

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

私が見るのは、「hinzufügen」ボタンの右の数だけです。何が問題なのか分かりません。どうすれば修正できますか？

Answer 1

あなたはArticlesCtrl as artを使用しています。したがって、範囲内の記事にアクセスするには、接頭辞としてartを付ける必要があります。

<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

あなたはng-repeat

でart.articlesが欠落しているが、すべてにこの

<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

感謝を試してみてください。私はこの

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

をしようとした場合、私は何を参照してくださいいけません。 「Hinzufügen」ボタンさえもなくなりました。私はこの

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

をしようとした場合、私は再び "Hinzufügen" -buttonsを見ることができます。

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>