编程语言
首页 > 编程语言> > javascript-Angularjs动态范围不起作用

javascript-Angularjs动态范围不起作用

作者:互联网

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

感谢您的帮助.也欢迎提出任何其他建议来实现这一目标.

解决方法:

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

实现此目的的最简单方法是,在details集合的每个元素上都有一个标志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

标签:angularjs,angularjs-directive,angularjs-scope,javascript
来源: https://codeday.me/bug/20191118/2029148.html