ng-repeat: mostra un elemento al clic e nasconde gli altri

Question

Ho una ng-repeat che visualizza un elenco di divs e quando clicco su uno di esso mostra un aditionnal div per l'elemento cliccato.

Questo è il lavoro

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

miei articoli sono caricati da un JSON contenente un elenco di elemento e ogni elemento ha un attribut showfull insieme predefinito di false in questo JSON. Funziona, ma ora voglio nascondere tutti gli altri elementi nell'elenco quando si fa clic su un elemento. Ho tryied qualcosa di simile:

questo non sta funzionando

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

e nel controller Ho una funzione di:

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

Ma anche senza la logica foreach questo non funziona, l'elemento non mostra il div aggiuntivo quando viene cliccato. Ho due domande:

1. Suppongo che questo è dovuto al item essere "passati dalla copia" nella funzione expand o un qualche tipo di portata problema isolato, ma mi può spiegare perché in dettaglio? risolto

2. Come posso nascondere tutto il div aggiuntivo di altri oggetti quando scatto una voce e mostrare il contenuto additionnal per questo articolo? Devo fare una direttiva? non risolta

Grazie

Answer 1

I pensa di essere sulla strada giusta. È necessario impostare showfull sull'elemento e quindi utilizzare ng-show o ng-if per nasconderlo o, come ha detto Gavin, utilizzare una classe.

Su ng-click è possibile chiamare la funzione expand, in cui si passa l'elemento, lo si attiva e si impostano tutti gli altri su nascosto.

Template:

<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

tuo espandere metodo è modificare la voce, in modo che le ng-spettacolo deve fare riferimento alla voce:

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

Per nascondere tutti i vostri articoli voi è necessario fare qualcosa come

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

Answer 3

Non dovrebbe la seconda div si desidera visualizzare BE riferimento la voce?

<div ng-repeat="item in items> 

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