AngularJS ng-repeat不显示JSON数组

AngularJS ng-repeat不显示JSON数组

问题描述:

我对Angular ng-repaet和JSON文件有点问题。吴重复不显示任何内容。AngularJS ng-repeat不显示JSON数组

这里是我的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”按钮的正确计数。我不知道有什么问题,我该如何解决它?

您正在使用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> 

你缺少art.articlesng-repeat

试试这个

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

感谢所有。如果我试试这个

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

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>