使用NG显示/隐藏AngularJS按钮-重复

Question

我有一个项目列表，点击应该打开单个项目，但目前，当试图打开单个项目时，它将打开所有项目，第二次单击关闭所有项目--请有人告知我的代码哪里出错了。谢谢。

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter()">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="toggle">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggle = true;
$scope.toggleFilter = function() {
  $scope.toggle = $scope.toggle === false ? true : false;
};

Answer 1

按以下方式编辑代码：

HTML

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter(item)">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="item.toggle">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggleFilter = function(item) {
  item.toggle = !item.toggle;
};

希望有效:)

Answer 2

ng-repeat为每个项目创建一个新的范围。每个新的作用域将从其父范围继承toggleFilter和toggle。现在，您正在切换父作用域的状态。因此，所有子作用域都得到相同的值。如果您想在子范围上切换值，只需使用this而不是$scope。演示

$scope.toggleFilter = function() {
  this.toggle = !this.toggle
}

Answer 3

在toggleFilter中添加参数，并使$scope.toggle成为数组。就像这样：

<div data-ng-repeat="item in items" layout="column">
  <div layout="row">
    <md-button class="md-primary" ng-click="toggleFilter($index)">Item {{$index + 1}}</md-button>
  </div>
  <div ng-hide="toggle[$index]">
    <!-- Content -->
  </div>
</div>

JS

$scope.toggle = [];
$scope.toggleFilter = function(inx) {
  $scope.toggle[inx] = $scope.toggle[inx] === false ? true : false;

}；