ng-repeat中的ng-init仅显示Dygraph中的最后一项

时间:2015-08-10 05:54:38

标签: javascript angularjs listview angularjs-ng-repeat ng-init

我是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],]"
                }
]
}

0 个答案:

没有答案