2017-02-21 83 views
0

我對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」按鈕的正確計數。我不知道有什麼問題,我該如何解決它?

回答

0

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

你缺少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> 
0

感謝所有。如果我試試這個

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

0

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>