Im practicing angularJS and jquery mobile. Im loading a local stored json file (used an array here) to my app and present some basic info in a list view. I want to present more detailed info in a dialog page\box once the user clicks on something in the JQM listview. Right now im able to present the basic info in the listview but pretty clueless regarding the next step. Please advise.
I was thinking that the one controller that i have can manage two pages, but this is obviously wrong.
JS code:
var myCuponApp = angular.module("cupon", []);
myCuponApp.controller("controller", function ($scope) {
$scope.itemSet = [{"id": 1, "cuponName": "Nikola Tesla", "age": "45"}];
});
html code:
<head ng-app="cupon">
<div data-role="page" id="scientists" ng-controller="controller">
<div data-role="header"><h3>great scientists</h3></div>
<div data-role="content">
<div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li ng-repeat="item in itemSet" data-role="button"><a href="#sc" data-rel="dialog">{{item.cuponName}}</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="sc" ng-controller="controller">
<div>{{item.cuponName}}</div>
</div>
</head>
