ng-repeat: pokazanie elementu kliknięcia i ukrycie pozostałych

Question

Mam powtórzenie ng, które wyświetla listę divs, a po kliknięciu na jeden wyświetla się adnotacja div dla klikniętego elementu.

To działa

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

Moje elementy są ładowane z JSON zawierającego listę pozycji i każda pozycja posiada domyślną Attribut showfull zestaw do false w tym json. To działa, ale teraz chcę ukryć wszystkie inne elementy na liście po kliknięciu elementu. Mam tryied coś takiego:

To nie działa

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

iw sterowniku Dodałem funkcję:

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

ale nawet bez logiki to foreach nie działa, element nie pokazuje dodatkowego div po kliknięciu. Mam dwa pytania:

1. Przypuszczam, jest to spowodowane item są „przekazywane przez kopię” w funkcji expand lub jakiś zakres kwestii izolacji ale możesz mi wyjaśnić, dlaczego w szczegółach? SOLVED

2. Jak mogę ukryć wszystkie dodatkowe div innych przedmiotów po kliknięciu elementu i pokazać źródło dodatkowego treści na tym sprzęcie? Czy muszę zrobić dyrektywę? nie rozwiązała

Dzięki

Answer 1

myślę, że jesteś na dobrej drodze. Musisz ustawić showfull na przedmiocie, a następnie użyć ng-show lub ng-if, aby go ukryć lub, jak wspomniał Gavin, użyć klasy.

Na ng-click możesz wywołać swoją funkcję expand, gdzie przekazujesz przedmiot, przełączasz go i ustawiasz wszystkie pozostałe jako ukryte.

Szablon:

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

Kontroler:

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

Answer 2

Twój rozwinąć metodę modyfikacji elementu, więc ng-show musi odwołać przedmiot:

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

celu ukrycia wszystkich elementów, które trzeba wykonać coś w rodzaju:

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

Answer 3

Gdyby nie drugi div chcesz pokazać be przedstawieniu element?

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