Question

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

公平的公开：我对AngularJS还是很陌生。我知道这是一个范围界定的问题，但是我不确定如何解决。几乎可以肯定，这是一种不知道要问正确问题的情况。

我这里有一个jsfiddle演示了我的困难：http://jsfiddle.net/36BYs/838/

示例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>

示例JS：

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

function MainCtrl( $scope ) {
  $scope.isVisible = true;
  $scope.mentors = [ 'Jonathan', 'Nathan', 'Chris', 'Brian', 'Timothy' ];
}

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

在此先感谢您提供的任何建议。

Answer 1

var app = angular.module('myApp', []);

app.controller("myCtrl", function ($scope) {
  $scope.mentors = [
    'Jonathan',
    'Nathan',
    'Chris',
    'Brian',
    'Timothy'
  ];
  
  $scope.showAll = function() {
    $scope.visibleMentors = $scope.mentors.slice();
  };
  
  $scope.hideAll = function() {
    $scope.visibleMentors = [];
  };
  
  $scope.isVisible = function(mentor) {
    return $scope.visibleMentors.includes(mentor);
  };
  
  $scope.show = function(mentor) {
    $scope.visibleMentors.push(mentor);
  };
  
  $scope.hide = function(mentor) {
    $scope.visibleMentors.splice($scope.visibleMentors.indexOf(mentor), 1);
  };
  
  $scope.showAll();
});

a {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-click="showAll()">show all</button>
    <button ng-click="hideAll()">hide all</button>                                                                                                                                                                           
    <ul>
      <li ng-repeat="mentor in mentors">
        <a ng-show="isVisible(mentor)" ng-click="hide(mentor)">hide</a>
        <a ng-show="!isVisible(mentor)" ng-click="show(mentor)">show</a>
        <span ng-show="isVisible(mentor)">
          {{mentor}}
        </span>
      </li>
    </ul>
  </div>
</div>

AngularJS：ng-repeat和作用域ng-click

1 个答案: