Question

我有一个项目列表，点击它们应该打开单个项目，但是当前尝试打开单个项目时它会打开所有项目，然后在第二次点击时关闭所有项目 - 有人可以建议我哪里出错了我的代码如下。谢谢。

HTML

<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。 Demo

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

Answer 3

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

<强> HTML

<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;

};

Answer 4

嗨，所以我希望我理解正确，但下面是基于您上述问题的示例代码。已经冒昧地继续改变您的代码。

HTML

<div data-ng-repeat="item in items" layout="column">
<div layout="row">
<md-button class="md-primary" ng-click="toggleFilter()">{{buttonText}} </md-button>
</div>
<div ng-show="toggle">
<!-- Content -->
</div>
</div>

您的JS将如下

$ scope.toggle = false;

$scope.buttonText = "Show";
$scope.toggleFilter = function(){
$scope.toggle = !$scope.toggle;
$scope.buttonText = "Show";
if(toggle===true){
$scope.buttonText = "Hide";
}
};

我希望这会有所帮助。

Answer 5

您的HTML将如下所示（仅需要更改HTML）。

account_id

我希望你的问题得到解答。如果没有，请发表评论，我将非常乐意提供帮助。

AngularJS使用NG重复显示/隐藏切换

5 个答案: