Im trying to load some data from a local json file and put it inside a jquery mobile listview using angularJS. Im having a hard time to understand how do I combine the ng-repeat with the data-role="listview".
For the fiddle example i used an online hosted json file from filltext.com.
i updated the code according to Danyu's suggestion, but it still doesnt work. Now all the usernames appear in ONE li element, instead of one username in one li element.
fiddle link: http://jsfiddle.net/hh8hS/
html code:
<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 code:
var data1= [
{
"id": 1,
"email": "[email protected]",
"username": "NCollier",
"password": "XIsyw"
},
{
"id": 2,
"email": "[email protected]",
"username": "NDerucher",
"password": "f687l"
},
{
"id": 3,
"email": "[email protected]",
"username": "DBario",
"password": "Vl7ND"
},
{
"id": 4,
"email": "[email protected]",
"username": "LOng",
"password": "JeTnK"
}
];
var myApp=angular.module("test",[]);
myApp.controller("controller", function($scope,$http){
$http.get("data1").success(function(data){
$scope.itemSet=data;
});
});
EDIT: apparently the code works with the little change Danyu suggested, it was a local problem on my PC.
