Angularjs Dynamic scope not working

Question

hi i'm trying to create $scope dynamically and set it true on click to show some details inside ng-repeat but it doesn't seem to work ,Here is the plunk plunk

var app=angular.module('myApp',[]);
 app.controller('myCtrl', function($scope){
 $scope.details=[{
 cid:100,
  foo:'first component'
  },

 {
   cid:101,
 foo:'second component'
  },{
   cid:102,
    foo:'third component'
    }];
 $scope.showGraph=function(serverid){
  console.log(serverid);
   if ($scope[serverid] === undefined) {

     $scope[serverid] = true;
     console.log($scope[serverid]);
    } else {
    $scope[serverid] = true;
     }
      };
   });

thanks for your help.Any other suggestions to achieve this is also welcomed.

Your ng-if shows fundamental javascript misunderstanding of dynamic variable names ... String + variable returns string not variable — charlietfl
– charlietfl, Commented Jun 5, 2016 at 12:42

Pankaj Parkar · Accepted Answer · 2016-06-05 12:45:13Z

3

Currently you are generating some variable name by dynamically passing serverid parameter to it(single scope variable is taking responsibility of all details collection). And the main issue was how you were trying to retrieve variable value from scope isn't correct syntax(ng-if directive expression trying to concatenate strings).

The simplest way to achieve this would be, have a flag showGraph on each element of details collection. Then on click just toggle showGraph flag

  <ul ng-repeat='detail in details'>
    <li><p>{{detail.foo}} <a href="#" ng-click='detail.showGraph =!detail.showGraph'>show graph</a>
    </p>
    <div ng-if='detail.showGraph'>
      show graph here
    </div>
    </li>
  </ul>

Forked Plunkr

edited Jun 5, 2016 at 12:45

answered Jun 5, 2016 at 12:39

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mikey Over a year ago

my app is different from that plunker.i'm getting a response from api.

Collectives™ on Stack Overflow

Angularjs Dynamic scope not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related