I am new to angularJs and trying to implement Listview in it. i am getting a json response after hitting an Api . In that Json i am recieving an array in which i am getting a string of graphdata value.What i am trying is to show that data in every listitem as per the position . I tried a lot and even try to do this through for loop..but i am always getting last value of graphdata that means i am getting last dygraph in every list item. Can any body tell me where i am going worng in code.
Here is my code:
HTML
<ion-list>
<div ng-repeat="entry in entries">
<div class="wrap_home">
<ion-item class="item-accordion"
ng-click="toggleGroup(entry)"
ng-init="showGraph(entry.graphData)"
ng-class="{active: isGroupShown(entry)}">
<div class="row">
<div class="col col-25">
<div class="top_spc">
<b>{{entry.ID}}</b>
</div>
</div>
</ion-item>
<ion-item class="item-accordion sm-item"
ng-show="isGroupShown(entry)">
<div class="sub_detail">
<div>
<graph ng-repeat="graph in graphs" data="graph.data"
></graph>
</div>
</div>
</ion-item>
</div>
</div>
</ion-list>
Controller :
.controller('HomeCtrl', function($scope, DataService) {
$scope.listnew = DataService.getProducts();
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
/*
* if given group is the selected group, deselect it else, select
* the given group
*/
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group, graphData) {
return $scope.shownGroup === group;
};
$scope.showGraph = function(graphData) {
$scope.gData = graphData;
var array = eval(graphData);
$scope.graphs = [ {
data : array,
},
];
};
})
.directive(
'graph',
function() {
return {
restrict : 'E',
scope : {
data : '=',
opts : '='
},
template : '<div class="graph"></div>',
link : function(scope, elem, attrs) {
var graph = new Dygraph(elem.children()[0],
scope.data, scope.opts);
}
};
})
JSON Response :
{"entries": [
{
"ID": 1,
"graphData": "[[ new Date(\"2015/08/09 15:17:42\"), 28.4, 15.0, 36.0],[ new Date(\"2015/08/09 15:22:43\"), 28.5, 15.0, 36.0],[ new Date(\"2015/08/09 15:27:43\"), 28.4, 15.0, 36.0],[ new Date(\"2015/08/09 15:32:43\"), 28.6, 15.0, 36.0],[ new Date(\"2015/08/09 15:37:43\"), 28.6, 15.0, 36.0],[ new Date(\"2015/08/09 15:42:43\"), 28.6, 15.0, 36.0],[ new Date(\"2015/08/09 15:47:43\"), 28.6, 15.0, 36.0],[ new Date(\"2015/08/09 15:52:43\"), 28.9, 15.0, 36.0],]"
},
{
"ID": 2,
"graphData": "[[ new Date(\"2015/08/09 15:19:35\"), 30.0, 15.0, 37.5],[ new Date(\"2015/08/09 15:24:35\"), 30.0, 15.0, 37.5],[ new Date(\"2015/08/09 15:29:35\"), 30.1, 15.0, 37.5],[ new Date(\"2015/08/09 15:34:35\"), 30.1, 15.0, 37.5],[ new Date(\"2015/08/09 15:39:35\"), 30.2, 15.0, 37.5],[ new Date(\"2015/08/09 15:44:35\"), 30.1, 15.0, 37.5],[ new Date(\"2015/08/09 15:49:35\"), 30.2, 15.0, 37.5],[ new Date(\"2015/08/09 15:54:35\"), 30.3, 15.0, 37.5],]"
},
{
"ID": 3,
"graphData": "[[ new Date(\"2015/08/09 15:19:05\"), 28.7, 7.5, 40.0],[ new Date(\"2015/08/09 15:24:05\"), 28.7, 7.5, 40.0],[ new Date(\"2015/08/09 15:29:05\"), 28.9, 7.5, 40.0],[ new Date(\"2015/08/09 15:34:05\"), 28.9, 7.5, 40.0],[ new Date(\"2015/08/09 15:39:05\"), 29.1, 7.5, 40.0],[ new Date(\"2015/08/09 15:44:05\"), 29.0, 7.5, 40.0],[ new Date(\"2015/08/09 15:49:05\"), 28.9, 7.5, 40.0],[ new Date(\"2015/08/09 15:54:05\"), 29.0, 7.5, 40.0],]"
}
]
}