Angularjs动态范围不起作用

时间:2016-06-05 12:32:00

标签: javascript angularjs angularjs-directive angularjs-scope

嗨我正在尝试动态创建$ 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;
     }
      };
   });

感谢您的帮助。欢迎任何其他建议。

1 个答案:

答案 0 :(得分:3)

目前,您通过动态地将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