javascript - Angularjs 动态范围不起作用

Question

您好，我正在尝试动态创建 $scope 并在单击时将其设置为 true 以显示 ng-repeat 中的一些详细信息，但它似乎不起作用，这是 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;
     }
      };
   });

感谢您的帮助。也欢迎任何其他实现此目的的建议。

Answer 1

目前您正在通过动态传递 serverid 参数来生成一些变量名称(单个作用域变量负责收集所有详细信息)。主要问题是您尝试从作用域中检索变量值的方式语法不正确(ng-if 指令表达式试图连接字符串)。

实现此目的的最简单方法是，在详细信息集合的每个元素上都有一个标记 showGraph。然后单击只需切换 showGraph 标志

  <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