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.articles
在ng-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>