Question

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

我根据丹宇的建议更新了代码，但它仍然无效。现在，所有用户名都出现在ONE li元素中，而不是一个li元素中的一个用户名。

小提琴链接： 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建议的小改变，这是我PC上的本地问题。

Answer 1

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

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

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

1 个答案: