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

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 。 演示

$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）。

<div ng-show=showMe>
<!--content goes here -->
<ul>
<li ng-hide = "showMe">item1</li>
<li ng-hide = "showMe">item2</li>
<li ng-hide = "showMe">item3</li>
<li ng-hide = "">item4</li>
</ul>
</div>

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