ng-repeat: zeigt ein Element beim Klicken und versteckt die anderen

Question

Ich habe eine ng-repeat welche eine Liste von divs anzeigt und wenn ich auf eins klicke zeigt es eine weitere div für das angeklickte Element an.

Dies funktionieren

<div ng-repeat="item in items"> 

    <div ng-click="showfull = !showfull"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

sind meine Elemente aus einer json eine Liste von Elemente geladen enthält, und jedes Element hat in diesem json einen Standard-Attribut showfull Satz false. Das funktioniert, aber jetzt möchte ich alle anderen Elemente in der Liste ausblenden, wenn auf ein Element geklickt wird. Ich habe so etwas wie dies tryied:

Diese nicht funktioniert

<div ng-repeat="item in items"> 

    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

und in der Steuerung habe ich eine Funktion hinzugefügt:

$scope.expand = function(e) { 
    e.showfull = !e.showfull; 
    //TODO: put here a foreach logic to hide all other items 
} 

Aber auch ohne die foreach Logik dieses funktioniert nicht, das Element zeigt nicht den zusätzlichen Div, wenn geklickt wird. Ich habe zwei Fragen:

1. Ich nehme an, dies zu item gebührt in der expand Funktion oder irgendeine Art von Umfang Isolation Problem „durch Kopie übergeben“ werden, aber können Sie mir erklären, warum im Detail? GELöST

2. Wie kann ich alle zusätzliche div anderer Elemente ausblenden, wenn ich ein Element klicken und den zusaetzliche Inhalt zu diesem Artikel zeigen? Muss ich eine Richtlinie machen? NICHT

Dank

Answer 1

I Ich denke du bist auf dem richtigen Weg. Sie müssen die showfull auf dem Artikel und dann ng-show oder ng-if, um es zu verbergen, oder wie Gavin erwähnt, verwenden Sie eine Klasse.

Auf ng-click können Sie Ihre expand Funktion aufrufen, wo Sie das Element übergeben, umschalten und alle anderen auf ausgeblendet setzen.

Vorlage:

<div ng-repeat="item in items> 
    <div ng-click="expand(item)"> 
     <div> 
      <h1>{{item.title}}</h1> 
      <p>{{item.content}}</p> 
     </div> 
    </div> 
    <div ng-show="item.showfull"> 
     <p>{{item.info}}</p> 
    </div> 
    <hr/> 
</div> 

Controller:

$scope.expand = function (item) { 
    angular.forEach($scope.items, function (currentItem) { 
     currentItem.showfull = currentItem === item && !currentItem.showfull; 
    }); 
}; 

Answer 2

Ihre GELÖST Maximierungsmethode das Element wird modifiziert, so dass Ihre ng-Show den Artikel verweisen muss:

<div ng-show="item.showfull"> 
    <p>{{item.info}}</p> 
</div> 

Um alle Ihre Artikel verstecken Sie muss etwas tun wie

$scope.expand = function(item) { 
    angular.forEach(items, function(i) { 
     if (i === item) { 
      i.showfull = !i.showfull; 
     } else { 
      i.showfull = false; 
     } 
    }); 
}; 

Answer 3

Sollte nicht der zweite div Sie sein Verweis auf die Artikel angezeigt werden soll?