javascript - 无法通过 jquery 移动应用程序内的 angularJS 从本地 json 文件加载数据

Question

我尝试从本地 json 文件加载一些数据，并使用 angularJS 将其放入 jquery mobile listview 中。我很难理解如何将 ng-repeat 与 data-role="listview" 结合起来。 对于 fiddle 示例，我使用了来自 filltext.com 的在线托管 json 文件。

我按照Danyu的建议更新了代码，但还是不行。现在，所有用户名都出现在一个 li 元素中，而不是一个用户名出现在一个 li 元素中。

fiddle 链接: http://jsfiddle.net/hh8hS/

html代码:

<div data-role="page" id="scientists" ng-app="test">
    <div data-role="header"><h3>jquery mobile + json call test</h3></div>
    <div data-role="content">
        <div ng-controller="controller">
            <ul data-role="listview" data-inset="true" data-filter="true">
                <li ng-repeat="item in itemSet">{{item.username}}</li>
            </ul>
        </div>
    </div>
</div>

JS代码:

var data1= [
    {
        "id": 1,
        "email": "RWahl@vitae.net",
        "username": "NCollier",
        "password": "XIsyw"
    },
    {
        "id": 2,
        "email": "AKahlig@eget.net",
        "username": "NDerucher",
        "password": "f687l"
    },
    {
        "id": 3,
        "email": "KKirkley@sagittis.com",
        "username": "DBario",
        "password": "Vl7ND"
    },
    {
        "id": 4,
        "email": "NMcgarity@magna.com",
        "username": "LOng",
        "password": "JeTnK"
    }
    ];

var myApp=angular.module("test",[]);

myApp.controller("controller", function($scope,$http){
   $http.get("data1").success(function(data){
      $scope.itemSet=data;
   });
});

编辑: 显然代码可以按照 Danyu 建议的小改动工作，这是我电脑上的本地问题。

Answer 1

您应该在 <li> 上使用 ng-repeat元素而不是父元素 <ul> :

<li ng-repeat="item in scientists">
   {{item.username}}
</li>