我是angularJs的新手,并尝试在其中实现Listview。我在击中Api后得到了json的回应。在那个Json我收到一个数组,其中我得到一个graphdata值的字符串。我正在尝试是按照位置显示每个listitem中的数据。我尝试了很多,甚至尝试通过for循环来做到这一点..但我总是得到graphdata的最后一个值,这意味着我在每个列表项中得到最后一个dygraph。任何人都可以告诉我我在代码中的位置。
这是我的代码:
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('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响应:
{"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],]"
}
]
}