Angular - Jak Zarządzać Jednym divem zawartością innego diva

Angular - Jak Zarządzać Jednym divem zawartością innego diva
Greedri
GR
Greedri
GR
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 4 lata
  • Postów:44
0

Witam mam problem ,
Ogólnie mam stronę stworzoną przez html (bardzo prosta) ,od nie dawna zacząłem sie bawić w angularze .I chciałbym zmodyfikować ją do angulara
Mniej więcej wygląda to tak http://wojcik.technikuminformatyczne.eu/03/ .W jaki łatwy sposób mógłbym skonstruować by poprzez (input) klikając na diva o nazwie np: Windows 1, zmieniała mi się zawartość tekstu niżej w tak zwanym divie "midmid" ?

HTML głównej strony w angularze wygada identycznie (jedynie bez ) dla nazw windowsów.

PS : Najlepiej gdyby po kliknięciu na dany DIV (z menu) był tylko wyłącznie tekst .

Z góry dziękuje

N0
Jesteś pewny, że pchanie Angulara do czegoś takiego ma sens? IMO to totalny overkill.
Kondziowsky
zrobi w jeden dzień i zawsze jakieś podstawy pozna, bo rozumiem, że to typowo pod naukę
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
0

Nie mam pojęcia, jak to zrobić w Angularze, ale bez Angulara, zrobiłabym np. tak:

Kopiuj
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>

<div class="menu2" id="windows_1">Windows 1</div>
<div class="menu2" id="windows_2">Windows 2</div>
<div class="menu2" id="windows_3">Windows 3</div>
<br><br>
<div id="midmid">tu mi pisz</div>

<script>
function zmien_tresc(id_zmieniany, el_zmieniajacy) {
  document.getElementById(id_zmieniany).innerHTML = tabela_tresci[el_zmieniajacy.id];
}

tab_el_zmieniajace = document.querySelectorAll(".menu2");
for (nr=0; nr<tab_el_zmieniajace.length; nr++) {
  tab_el_zmieniajace[nr].addEventListener("click", function() {zmien_tresc("midmid", this);});
}

tabela_tresci = new Array;
tabela_tresci["windows_1"] = "Windows 1 to było coś";
tabela_tresci["windows_2"] = "Windows 2 było jeszcze lepsze";
tabela_tresci["windows_3"] = "Windows 3 było de best of de best :)";
</script>

</body>
</html>
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Greedri
GR
Greedri
GR
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 4 lata
  • Postów:44
0
Freja Draco napisał(a):

Nie mam pojęcia, jak to zrobić w Angularze, ale bez Angulara, zrobiłabym np. tak:

Kopiuj
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>

<div class="menu2" id="windows_1">Windows 1</div>
<div class="menu2" id="windows_2">Windows 2</div>
<div class="menu2" id="windows_3">Windows 3</div>
<br><br>
<div id="midmid">tu mi pisz</div>

<script>
function zmien_tresc(id_zmieniany, el_zmieniajacy) {
  document.getElementById(id_zmieniany).innerHTML = tabela_tresci[el_zmieniajacy.id];
}

tab_el_zmieniajace = document.querySelectorAll(".menu2");
for (nr=0; nr<tab_el_zmieniajace.length; nr++) {
  tab_el_zmieniajace[nr].addEventListener("click", function() {zmien_tresc("midmid", this);});
}

tabela_tresci = new Array;
tabela_tresci["windows_1"] = "Windows 1 to było coś";
tabela_tresci["windows_2"] = "Windows 2 było jeszcze lepsze";
tabela_tresci["windows_3"] = "Windows 3 było de best of de best :)";
</script>

</body>
</html>

Umiałbyś ten JS zamienić na TypeScript ??

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Kondziowsky
Kondziowsky
Kondziowsky
Kondziowsky
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 2 lata
  • Postów:219
0

Bez przesady, myślę, że poradzisz sobie z przepisaniem do Angulara tego, co dostałeś :D
Wystarczy, że użyjesz zwykłego click'a i ElementRef

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Greedri
GR
Greedri
GR
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 4 lata
  • Postów:44
0
Kondziowsky napisał(a):

Bez przesady, myślę, że poradzisz sobie z przepisaniem do Angulara tego, co dostałeś :D
Wystarczy, że użyjesz zwykłego click'a i ElementRef

OOO Własnie chyba tego potrzebowalem ! ElementRef , wpisuje to z poziomu ts tak ? I to (click) ma byc w derektywie ng yup ? Dobrze rozumiem ?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Kondziowsky
Kondziowsky
Kondziowsky
Kondziowsky
  • Rejestracja:około 6 lat
  • Ostatnio:ponad 2 lata
  • Postów:219
0

(click) na divie, który wywołuje zmianę

@Edit Jeżeli byłby przypadek, w którym musiałbyś wykorzystać taką funkcję w wielu miejscach (komponentach) polecam stworzyć jakiś serwis.

edytowany 1x, ostatnio: Kondziowsky
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Greedri
GR
Greedri
GR
  • Rejestracja:ponad 5 lat
  • Ostatnio:prawie 4 lata
  • Postów:44
0
Kondziowsky napisał(a):

(click) na divie, który wywołuje zmianę

@Edit Jeżeli byłby przypadek, w którym musiałbyś wykorzystać taką funkcję w wielu miejscach (komponentach) polecam stworzyć jakiś serwis.

Hmm okej ,a co sądzisz o składni "template" w TypeScripcie >>??

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto