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

254 views Asked by At

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

0

There are 0 answers