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>

我希望你的問題得到解答。 如果沒有，請發表評論，我將非常樂意提供幫助。