ng-init in ng-repeat shows only the last item in Dygraph

☆樱花仙子☆ 提交于 2019-12-08 06:17:15

问题


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

来源:https://stackoverflow.com/questions/31912460/ng-init-in-ng-repeat-shows-only-the-last-item-in-dygraph

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!