Javascript AngularJS:ng重复并确定范围ng单击

我有一系列的列表项，由ng repeat填充。可见性由简单的ng单击和ng显示关系控制。在大多数情况下，这很好，但我希望能够通过一个全局按钮来控制显示/隐藏行为，该按钮将显示或隐藏列表中的所有可用项

公平披露：我对AngularJS还是很陌生。我知道这是一个范围问题，但我不知道如何解决它。这几乎肯定是一个不知道该问什么问题的案例

我在这里展示了我的困难：

示例HTML：

<div ng-controller="MainCtrl">

  <span ng-show="!IsVisible" ng-click="isVisible = !isVisible;" >
    (show/hide all)
    <i class="fa fa-minus-square-o fa-small"></i>
  </span>
<ul>
        <li ng-repeat="mentor in mentors">
        <a ng-click="isVisible = !isVisible;">show/hide</a>
        <span ng-show="isVisible">{{mentor}}</span>
        </li>
    </ul>
</div>

只要您没有单独切换其中一个列表项，它就可以正常工作。但如果单击以在特定行上显示/隐藏，则全局ng单击将失去对该项的控制

---

提前感谢您提供的任何建议。

在初始渲染时，angular试图为每个导师评估

isVisible

。由于

mentor.isVisible

将是

未定义的

，因此角度框架使用父范围的

isVisible

但是，当您切换一个特定的mentor时，您可以有效地为该特定的

mentor

字符串指定一个

isVisible

布尔属性。（因为您可以在javascript中将附加属性附加到

字符串中）

在此之后，您可以切换
显示/隐藏所有
，这将影响尚未分配自己的
isVisible
属性的每个导师

它演示了AngularJS的初始版本中的范围界定是多么混乱

以下是一个有效的答案：

我做了一些改变：


我没有给
$scope
赋值，而是使用
控制器名作为助记符语法。在控制器代码中，我将值分配给
此
，而不是
$scope
。我更喜欢这种方法，因为现在范围已经明确了

我已将
mentor
从字符串更改为对象，由两个值组成：
name
和
isVisible
。同样，这使得范围规则变得清晰和明确

HTML：

<div ng-controller="MainCtrl as mainCtrl">

  <span class = "clickable" ng-click="mainCtrl.isVisible = !mainCtrl.isVisible;" >
    (show/hide all)
    <i class="fa fa-minus-square-o fa-small"></i>
  </span>
<ul ng-show="mainCtrl.isVisible">
        <li ng-repeat="mentor in mainCtrl.mentors">
        <a class = "clickable" ng-click="mentor.isVisible = !mentor.isVisible;">show/hide</a>
        <span ng-show="mentor.isVisible">{{ mentor.name }}</span>
        </li>
    </ul>
</div>


var-app=angular.module（'myApp'，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.mentors=[
“乔纳森”，
“内森”，
“克里斯”，
“布莱恩”，
“蒂莫西”
];
$scope.showAll=函数（）{
$scope.visibleMentors=$scope.mentors.slice（）；
};
$scope.hideAll=函数（）{
$scope.visibleMentors=[]；
};
$scope.isVisible=功能（mentor）{
return$scope.visibleMentors.includes（导师）；
};
$scope.show=功能（导师）{
$scope.visibleMentors.push（导师）；
};
$scope.hide=函数（mentor）{
$scope.visibleMentors.splice（$scope.visibleMentors.indexOf（mentor），1）；
};
$scope.showAll（）；
});
a{
光标：指针；
}

全部展示
全部隐藏


隐藏
显示
{{mentor}}


虽然其他评论很有用，但用户miqid的评论为我的具体需求提供了最佳答案：

正如您所知，ng repeat引入了一个单独的作用域，因此下面的每个isVisible都不再跟踪父isVisible。一种解决方案是，除了跟踪父可见性状态外，还可以显式跟踪每个项目的isVisible状态，该状态在必要时覆盖项目级别1。Demo-jsfiddle.net/uLykhg0z–14小时前的miqid

JSFIDLE是Andrew Shepherd解决方案（jsFIDLE.net/uLykhg0z）的一个变体：

HTML:

这使我能够适应一些更复杂的嵌套，我必须在树结构中处理这些嵌套

再次感谢你们的帮助，伙计们
 正如您所知，
ng repeat
引入了一个单独的作用域，以便下面的每个
isVisible
不再跟踪父
isVisible
。一种解决方案是明确跟踪每个项目的
isVisible
，此外还跟踪父可见性状态，该状态在必要时覆盖项目级别1。演示-
<div ng-controller="MainCtrl as mainCtrl">

  <span class = "clickable" ng-click="mainCtrl.isVisible = !mainCtrl.isVisible;" >
    (show/hide all)
    <i class="fa fa-minus-square-o fa-small"></i>
  </span>
<ul ng-show="mainCtrl.isVisible">
        <li ng-repeat="mentor in mainCtrl.mentors">
        <a class = "clickable" ng-click="mentor.isVisible = !mentor.isVisible;">show/hide</a>
        <span ng-show="mentor.isVisible">{{ mentor.name }}</span>
        </li>
    </ul>
</div>

var app = angular.module('myApp', []);

function MainCtrl() {
  this.isVisible = true;
  var mentorNames = ['Jonathan', 'Nathan', 'Chris', 'Brian', 'Timothy'];
  this.mentors = mentorNames.map(
      name => { 
         return { 
             name:name, 
             isVisible:true 
         }; 
      }
  );
}

<div ng-controller="MainCtrl">

  <span ng-show="!IsVisible" class = "clickable" ng-click="toggleVisibility()" >
    (show/hide all)
    <i class="fa fa-minus-square-o fa-small"></i>
  </span>
  <ul>
        <li ng-repeat="mentor in mentors">
        <a class = "clickable" ng-click="mentor.isVisible = !mentor.isVisible;">show/hide</a>
        <span ng-show="mentor.isVisible">{{mentor.name}}</span>
        </li>
    </ul>
</div>

var app = angular.module('myApp', []);

function MainCtrl( $scope ) {
    var isVisible = true;
  $scope.mentors = [
    { name: 'Jonathan', isVisible: true },
    { name: 'Nathan', isVisible: true },
    { name: 'Chris', isVisible: true },
    { name: 'Brian', isVisible: true },
    { name: 'Timothy', isVisible: true },
  ];
  $scope.toggleVisibility = function () {
    isVisible = !isVisible;
    $scope.mentors = $scope.mentors.map(function (mentor) {
        mentor.isVisible = isVisible;
      return mentor;
    });
  };
}