AngularJS表示/非表示NGリピートとトグル

Question

私は単一のアイテムを開くべきであるが、現在単一のアイテムを開くときにすべてのアイテムを開き、2回目のクリックですべてのアイテムを閉じたアイテムリストを持っています誰かが私のコードで間違っているところでアドバイスをしてください。ありがとうございました。

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

はtoggleFilter内部parametrを追加し、$ 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 3

ng-repeatは、項目ごとに新しいスコープを作成します。新しいスコープはそれぞれ、親からtoggleFilterとtoggleを継承します。今すぐ親スコープの切り替え状態を切り替えています。したがって、すべての子スコープは同じ値になります。子スコープの値を切り替える場合は、$scopeの代わりにthisを使用するだけです。 Demo

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

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> 

$ scope.toggleを次のようにあなたのJSがなる= 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> 

私はあなたの質問が回答されて願っています。コメントを残していない場合、私は本当に喜んで助けてくれるでしょう。