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>

最后我的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

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>

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” - 按钮。

Answer 4

<强>样本

＆＃13;

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}
];
});

＆＃13;

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

＆＃13;

AngularJS ng-repeat不显示JSON数组

4 个答案: