AngularJS - ng-repeat dla child elementów

Question

Witam,

Rozpocząłem naukę biblioteki AngularJS, w ramach której próbuję przerobić "Wisielca" z jednego z odcinków JS M. Zelenta w taki sposób, aby działał w oparciu o ten framework. Obecnie próbuję wyświetlić wszystkie litery na ekran i mam problem z dodaniem div'a ze stylem "clear: both;" Poniżej przedstawię obecny stan:

W service na chwilę obecną mam tablicę oraz metodę:

var LETTERS = ["A", "Ą", "B", "C", "Ć", "D", "E", "Ę", "F", "G", "H", "I", "J", "K", "L", "Ł", "M", "N", "Ń", "O", "Ó", "P", "Q", "R", "S", "Ś", "T", "U", "V", "W", "X", "Y", "Z", "Ż", "Ź"];

service.getLetters = function() {
    return LETTERS;
};

Do kontrolera pobieram litery w następujący sposób:

hangman.letters = HangmanGameService.getLetters();

I teraz w templatce html chcę wyświetlić te litery w taki sposób jak to jest w odcinku JS:

<div id="alphabet">
    <div class="letter" ng-repeat="let in hangman.letters" ng-click="hangman.check($index)" id="let{{$index}}">
        {{ let }}
    </div>
    <div class="hangman-clear" ng-if="$index + 1 % 7 == 0"></div>
</div>

W odcinku po każdych 7 literach dodawany jest div ze stylem "clear: both;", Tutaj jest dodany tylko na końcu (po 35 literach).

Chciałem zapytać czy jest możliwość zmodyfikowania ng-repeat w taki sposób aby pętla dotyczyła child elementów? Inaczej mówiąc chciałem ng-repeat umieścić w div'ie "alphabet", który sam w sobie nie byłby powtarzany a jedynie jego child elementy. Wtedy kod powyżej miałby sens. Na chwilę obecną mam 1 inny pomysł, którego wolałbym nie używać, bo dotyczy podzielenia tablicy z literami na kilka mniejszych.

Answer 1

W odcinku po każdych 7 literach dodawany jest div ze stylem "clear: both;", Tutaj jest dodany tylko na końcu (po 35 literach). 

Czyli chcesz w środku pętli, co każde 7 znaków, wstawiać element ze swoim stylem? Czemu więc nie wstawisz elementu o klasie hangman-clear (na którym jest dyrektywa ng-if) do środka elementu z pętlą?

Chciałem zapytać czy jest możliwość zmodyfikowania ng-repeat w taki sposób aby pętla dotyczyła child elementów? Inaczej mówiąc chciałem ng-repeat umieścić w div'ie "alphabet", który sam w sobie nie byłby powtarzany a jedynie jego child elementy.

A teraz to tak nie działa? Dyrektywa ng-repeat jest umieszczona w jednym z dzieci #alphabet, czyli #alpahbet nie jest powtarzany, a jedynie element z ng-repeat.

---

Na marginesie:

• jeśli nie uczysz się AngularJS z powodu jakiegoś odgórnego przymusu (np. używasz go w pracy i nie masz wpływu na wybór narzędzia/frameworka), to nauka go już raczej nie ma sensu, ponieważ od tego roku framework przestał być wspierany. Jeśli chcesz uczyć się Angulara, to ucz się wersji na aktualnej platformie (początkowo nazywany Angular 2+)
• problem, który próbujesz rozwiązać zahacza trochę o mieszanie warstwy treści strony z warstwą jej prezentacji. Skoro potrzebujesz użyć clear w CSS, to znaczy, że pewnie używasz float, który nie służy do układania layoutu. Od kilku lat w CSS do dyspozycji są Flexbox oraz Grid
• jeśli więc uczysz się dla siebie i masz wpływ na dobór technologii, to ucz się aktualnych narzędzi

Comments

Chyba, że chce pracować w google :D to tam angular JS i angular2 jest używany

---

@ScriptyChris,

Czyli chcesz w środku pętli, co każde 7 znaków, wstawiać element ze swoim stylem? Czemu więc nie wstawisz elementu o klasie hangman-clear (na którym jest dyrektywa ng-if) do środka elementu z pętlą?

Z prostego powodu - będzie on wtedy child'em tego div'a a jak rzucisz okiem na kod z odcinka to zarówno  div'y z literami jak i ten pusty z "clear: both;" są bezpośrednimi child'ami div'a alfabet.

A teraz to tak nie działa? Dyrektywa ng-repeat jest umieszczona w jednym z dzieci #alphabet, czyli #alpahbet nie jest powtarzany, a jedynie element z ng-repeat.

Niestety nie. ng-repeat powtarza tego div'a, w którym jest deklarowany - łącznie z jego child'ami.

Co do marginesu - nie mam odgórnego przymusu, ale ze względu na moją obecną sytuację prędzej czy później będę miał z nim kontakt. Dlatego chcę poznać przynajmniej podstawy. Stąd też sam projekt nie jest zbyt ambitny, bo jakby nie patrzeć to tylko przerobione strony, stworzone w tutorial'u. Generalnie uczę się Javy + Spring'a a jednocześnie miałem plan na naukę właśnie Angulara 2+, na potrzeby tworzenia frontów w aplikacjach.

Jestem też świadom, że ten przykład można zrobić co najmniej na 5 lepszych sposobów, ale nie to jest celem tego projektu. Chciałem po prostu poćwiczyć AngularJS i w możliwie największym stopniu odtworzyć te stronki.

---

Czyli tego próbowałeś?

<div id="alphabet">
    <div class="letter" ng-repeat="let in hangman.letters" ng-click="hangman.check($index)" id="let{{$index}}">
        {{ let }}

        <div class="hangman-clear" ng-if="$index + 1 % 7 == 0"></div>
    </div>
</div>

Dyrektywa ng-if powinna renderować element tylko jeśli będzie spełniony warunek. Więc, na oko, to powinno działać tak jak w odcinku: https://youtu.be/9FVtiJHFCSU?t=2612

---

Tak, dokładnie tego próbowałem i tak ng-if dodaje tego div'a tylko jeśli jest spełniony warunek. Natomiast w tym przypadku ten div z if'em staje się dzieckiem div'a .letter, a w odcinku wszystkie div'y są bezpośrednimi child'ami div'a alfabet.

---

A, już wiem co chcesz osiągnąć: element .hangman-clear ma być warunkowo powtarzalnym rodzeństwem dla każdorazowo powtórzonych elementów o klasie letter. Spróbuj użyć kombinacji ng-repeat-start razem z ng-repeat-end:

<div id="alphabet">
    <div class="letter" 
        ng-repeat-start="let in hangman.letters" 
        ng-click="hangman.check($index)" 
        id="let{{$index}}"
    >
        {{ let }}
    </div>
    <div class="hangman-clear" 
        ng-repeat-end 
        ng-if="$index + 1 % 7 == 0"
    ></div>
</div>

---

Super, działa dokładnie tak jak tego chciałem. Musiałem tylko poprawić warunek:

ng-if="($index + 1) % 7 == 0"

Bez tych nawiasów zawsze był niespełniony Dzięki za pomoc!

Answer 2

To jest twój iterator po elementach, w nim w śodku niego nie ma diva. To jest jedyynie opakowanie dla wyświetlanych wartości . Każdy element niejako będzie divem, zależy czy chcesz dodać kolejny div... czy po każdym.
To co jest tutaj 

<div class="hangman-clear" ng-if="$index + 1 % 7 == 0"></div>

znajduje się poza iteratorem zewnętrznym, należy to do diva- alfabet 

 <div class="letter" ng-repeat="let in hangman.letters" ng-click="hangman.check($index)" id="let{{$index}}">

ten div i ng-repeat ... nie obejmuje tego co dzieje się w divie o class="hangman-clear" gdyż div, repeat zamykany jest po wypisaniu wartości 

Użyj PIPE z indexowaniem, i potem zaleznie od indeksu wyświeltaj w ng-if, wewnątrz żę jeśli spełni warunek to wyświetli diva 
 

      <li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

 

Comments

Tak, przykład powyżej jest błędny - dlatego też założyłem ten temat

Dzięki za sugestię, spróbuję użyć PIPE.

EDIT:

Jedno pytanie - na pewno mówimy tutaj o AngularJS (nie Angular 2+)? W dokumentacji nie mogę znaleźć informacji na ten temat a na innych forach jest wprost napisane, że ngFor nie istnieje w wersji JS. No i zdecydowanie chcę tutaj uniknąć tworzenia custom'owych dyrektyw lub komponentów.