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

【问题标题】：getting Angular.js to display html list of json data让 Angular.js 显示 json 数据的 html 列表
【发布时间】：2015-04-25 14:41:42
【问题描述】：

我正在尝试在 json 文件中包含游戏对象的 id 字段的 HTML 列表。但是它没有出现在我的用户界面中。我不知道为什么它甚至不会渲染。

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

---- 用户界面------

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

【问题讨论】：

你检查过你的回复了吗？你有游戏列表吗？
请告诉我，你的控制台输出是什么
什么是“console.log(data);”打印？？
向我们提供您的 json
我们看不到您所有的 core.js 文件，但是您是否将 mainController 函数添加为角度控制器？像这样：app.controller('mainController' ...

标签： javascript json angularjs

【解决方案1】：

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

否则代码看起来很好。 plunker.

另外，你为什么使用 jQuery 而不是使用 angular 的 jqlite？无论如何你都不会使用 jQuery。

【讨论】：

这是正确的答案！看看 user2510809 控制器，然后看看你的： function mainController($scope,$http) { 而不是 app.controller('mainController', function($scope,$http) {
@hayatoShingu，由于 OP 使用的是 Angular 1.0.8，因此允许使用全局控制器功能，因此即使使用 function mainController() 它也可以工作：plnkr.co/edit/2e1EeZTKVNINslE6h2ms?p=preview。
对不起，我的错误，我是肤浅的。我没有注意到angularjs的版本

【解决方案2】：

尝试将您的ul 放入div

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

【讨论】：

【解决方案3】：

我有几个建议：

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

我还建议您查看：

角$q docs
角ngBind docs

【讨论】：

【解决方案4】：

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

【讨论】：

已将答案标记为“无用”的人，请给我正确答案。
我不是那个人，但你应该考虑声明和初始化之间的区别
是的，我的错。我想说初始化。不过这可以从$scope.formData的引用中理解。
@dipendra，是否在.success 函数内部或外部分配$scope.games 根本不重要。我不知道你为什么会得出这样的结论，而且无论如何，你没有解释这一点，也没有解释它应该如何解决你的答案中的问题。