[英]JSON elements not loading on AngularJS page
I'm working on using JSON to keep a list of media themes. 我正在使用JSON保留媒体主题列表。 When trying to load it, however, I get a blank section where they should be on the page. 但是,当尝试加载它时,我得到了一个空白部分,它们应该在页面上。 I get no errors on my console, implying that something is missing from my HTML or my JavaScript. 我在控制台上没有看到任何错误,这表明HTML或JavaScript中缺少某些内容。 Any pointers are much appreciated. 非常感谢任何指针。
The HTML: 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>
The Angular script: 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;
});
});
And finally, the JSON in question: 最后,有问题的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."}
]
I am not sure if this is the issue , but this is atleast one of the problems 我不确定这是否是问题,但这至少是问题之一
<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>
should be 应该
<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>
You are using themes
instead of theme
inside ng-repeat
您正在ng-repeat
中使用themes
而不是theme
Your html elements inside ng-repeat should point to 'theme' instead of 'themes' 您在ng-repeat中的html元素应指向“主题”而不是“主题”
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.