Question

我正在尝试在json文件中拥有游戏对象的id字段的HTML列表。但是它没有显示在我的UI中。我不知道为什么它甚至不会渲染。

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

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

----当我输入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}]

Answer 1

我有几点建议：

使用承诺加载数据 - see this SO question。
使用ng-bind指令显示数据而不是{{game._id}} - see this codepen

我还建议您查看：

Angular $q docs
Angular ngBind docs

Answer 2

您在页面上打印{{ game._id }}的事实表明您有些问题。否则，它要么没有显示任何内容，要么在控制台上显示一些错误。你可能还有一些问题在你的JSON文件本身。

否则代码看起来很好。 plunker

另外，为什么你使用jQuery而不使用angular＆＃39; sqlite？你不管怎样都使用jQuery。

Answer 3

尝试将ul放入div

<div>
  <ul>
    <li ng-repeat="game in games"{{ game._id }}>
    </li>
  </ul>
</div>

Answer 4

您需要在成功函数之外声明$ scope.games变量。声明$ scope.formData的级别的意思。

让Angular.js显示json数据的html列表

4 个答案: