Question

我正在使用JSON来保留媒体主题列表。然而，当试图加载它时，我得到一个空白部分，它们应该在页面上。我的控制台上没有错误，暗示我的HTML或JavaScript中缺少某些内容。任何指针都非常感激。

HTML：

<div class="themeContainer">
        <div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{themes.thumb}}" class="md-avatar" />
            <h4>{{themes.title}}</h4>
            <h5>{{themes.desc}}</h5>
        </div>
     </div>

Angular脚本：

'use strict';

angular.module('careApp.pTheme', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/pTheme', {
    templateUrl: './templates/pTheme.html',
    controller: 'pThemeCtrl'
  });
}])

.controller('pThemeCtrl', function($scope, $http) {
    $http.get('./templates/scripts/themes.json').then(function(res){
        $scope.themes = res.data;
    });
});

最后，问题是JSON：

[

{"thumb": "./templates/scripts/thumbs/01.jpg", "title": "Mt. Hood Sunset", "desc": "A relaxing view of Mt. Hood, Oregon."},
{"thumb": "./templates/scripts/thumbs/02.jpg", "title": "Misty Rainforest", "desc": "Tap, Pay 1 life, Sacrifice Misty Rainforest: search your library for a Forest or Island card and put it onto the battlefield. Then shuffle your library. "},
{"thumb": "./templates/scripts/thumbs/03.jpg", "title": "Clouds", "desc": "Blue skies and white clouds."}

]

Answer 1

我不确定这是否是问题，但这至少是其中一个问题

<div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{themes.thumb}}" class="md-avatar" />
            <h4>{{themes.title}}</h4>
            <h5>{{themes.desc}}</h5>
        </div>

应该是

<div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{theme.thumb}}" class="md-avatar" />
            <h4>{{theme.title}}</h4>
            <h5>{{theme.desc}}</h5>
        </div>

您在themes

中使用theme代替ng-repeat

Answer 2

你的ng-repeat中的html元素应该指向'theme'而不是'themes'

<div class="themeContainer">
    <div ng-repeat="theme in themes" class="repeated-item" flex>
        <img ng-src="{{theme.thumb}}" class="md-avatar" />
        <h4>{{theme.title}}</h4>
        <h5>{{theme.desc}}</h5>
    </div>
 </div>

未在AngularJS页面上加载JSON元素

2 个答案: