让 Angular.js 显示 json 数据的 html 列表
[英]getting Angular.js to display html list of json data
问题描述
I am trying to have an HTML list of the id fields of game objects in a json file.
我正在尝试在 json 文件中包含游戏对象的 id 字段的 HTML 列表。 However It does not show up in my UI.但是它没有显示在我的用户界面中。 I don't know why it wont even render.我不知道为什么它甚至不会渲染。
---core.js--- ---core.js---
var gameapp = angular.module('gameapp',[]);
function mainController($scope,$http) {
$scope.formData = {};
$http.get('/api/games')
.success(function(data){
$scope.games = data;
console.log(data);
})
.error(function(data) {
console.log('Error' + data);
});
}
---- index.html---- ---- index.html----
<!doctype html>
<html ng-app="gameapp">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
<title>Games API</title>
<body ng-controller="mainController">Games List:
<ul>
<li ng-repeat="game in games">
{{ game._id }}
</li>
</ul>
</body>
</html>
---- UI------ ---- 用户界面------
Games List:
{{ game._id }}
---- Here is my JSON when I type www.example.com/api/games ---- 这是我输入 www.example.com/api/games 时的 JSON
[{"_id":"54e4add76b91eab37a3611c8","objectname":"objectname","objectid":"objectid","average":"average","avgweight":"avgweight","rank":"rank","minplayers":"minplayers","maxplayers":"maxplayers","playingtime":"playingtime","biggbestplayers":"bggbestplayers"},{"_id":"54e4add76b91eab37a3611c9","objectname":"6 qui prend !","objectid":432,"average":6.75695,"avgweight":1.2418,"rank":445,"minplayers":2,"maxplayers":10,"playingtime":45,"biggbestplayers":"5-- 6"},{"_id":"54e4add76b91eab37a3611ca","objectname":"Adel Verpflichtet","objectid":120,"average":6.40472,"avgweight":1.8605,"rank":861,"minplayers":2,"maxplayers":6,"playingtime":45,"biggbestplayers":"5-- 6"},{"_id":"54e4add76b91eab37a3611cb","objectname":"Age of Steam","objectid":4098,"average":7.53212,"avgweight":3.9285,"rank":53,"minplayers":1,"maxplayers":6,"playingtime":120,"biggbestplayers":4},{"_id":"54e4add76b91eab37a3611cc","objectname":"Agricola","objectid":31260,"average":8.06284,"avgweight":3.6088,"rank":5,"minplayers":1,"maxplayers":5,"playingtime":180,"biggbestplayers":"3-- 4"},{"_id":"54e4add76b91eab37a3611cd","objectname":"Aladdin's Dragons","objectid":492,"average":6.66519,"avgweight":2.4728,"rank":537,"minplayers":3,"maxplayers":5,"playingtime":90,"biggbestplayers":5},{"_id":"54e4add76b91eab37a3611ce","objectname":"Alexandros","objectid":8273,"average":5.86456,"avgweight":2.3423,"rank":2271,"minplayers":2,"maxplayers":4,"playingtime":45,"biggbestplayers":"NA"},{"_id":"54e4add76b91eab37a3611cf","objectname":"Alhambra","objectid":6249,"average":6.96861,"avgweight":2.1234,"rank":298,"minplayers":2,"maxplayers":6,"playingtime":60,"biggbestplayers":3},{"_id":"54e4add76b91eab37a3611d0","objectname":"Alien Frontiers","objectid":48726,"average":7.3786,"avgweight":2.541,"rank":93,"minplayers":2,"maxplayers":4,"playingtime":90,"biggbestplayers":"3-- 4"},{"_id":"54e4add76b91eab37a3611d1","objectname":"Amun-Re","objectid":5404,"average":7.21837,"avgweight":3.068,"rank":165,"minplayers":3,"maxplayers":5,"playingtime":90,"biggbestplayers":5}]
4 个解决方案
解决方案1
0 2015-02-24 04:43:18
I have a couple suggestions:我有几个建议：
- Use a promise to load the data - see this SO question .使用承诺加载数据 -请参阅此 SO 问题。
- Use the
ng-binddirective to show the data instead of{{game._id}}- see this codepen使用ng-bind指令来显示数据而不是{{game._id}}-请参阅此代码笔
I'd also recommend looking over:我还建议查看：
- Angular
$qdocs角度$q文档 - Angular
ngBinddocsAngular ngBind文档
解决方案2
0 2015-02-24 06:46:13
The fact that you are getting {{ game._id }} printed on your page signifies there's some issue with you angular.您在页面上打印{{ game._id }}的事实表明您的角度存在一些问题。 Otherwise, it would either have not shown anything or would have shown some error on console.You might aswell have some issue in you JSON file itself.否则，它要么不会显示任何内容，要么会在控制台上显示一些错误。您的 JSON 文件本身也可能存在一些问题。
The code looks fine otherwise.否则代码看起来不错。 plunker .笨蛋。
Also, why are you using jQuery and not using angular's jqlite?另外，你为什么使用 jQuery 而不是使用 angular 的 jqlite？ You aint using jQuery anyways.无论如何，您不会使用 jQuery。
解决方案3
0 2015-11-13 14:55:42
Try to put your ul inside a div尝试将您的ul放在div
<div>
<ul>
<li ng-repeat="game in games"{{ game._id }}>
</li>
</ul>
</div>
解决方案4
-2 2015-02-24 05:27:57
You need to declare $scope.games variable outside success function.您需要在成功函数之外声明 $scope.games 变量。 Means at the level where $scope.formData is declared.表示在声明 $scope.formData 的级别。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.