AngularJS - wykorzystanie atrybutu ng-repeat do automatycznego wstawiania zawartości zmiennej tablicowej

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1226 razy

Na poprzedniej stronie tego działu opisywałem jak stworzyć moduł oraz kontroler. Była tam zmienna tablicowa beautifulPeople, do której można było dodać delikwenta. Problem w tym, że efektu dodania takiego "delikwenta" do "bazy danych" ni jak zobaczyć tam nie można było. Cóż więc począć z tym fantem i jak szybko i sprawnie rozwiązać ten jakże palący problem. Otóż z odsieczą przychodzi atrybut ng-repeat, który bez problemu umożliwia wyświetlenie zawartości tablicy. Oto przykład:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <script src="AngularJS.min.js"></script> <style> label{ display: inline-block; width: 150px; } </style> </head> <body ng-app = "myFirstAngularApplicationEver" ng-controller = "myFirstControllerEver"> <p><label for = "personName">Imię:</label><input type="text" ng-model = "person.name" name = "personName"/></p> <p><label for = "personSuraname">Nazwisko: </label><input type = "text" ng-model = "person.surname" name = "personSurname"/></p> <p><label for = "personAge">Wiek:</label><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></p> <p>{{ person.name + " " + person.surname}}</p> <table> <tr><th>Nr.</th><th>Imię i nazwisko</th><th>Wiek</th></tr> <tr ng-repeat="beautifulPerson in beautifulPeople"> <td>{{ $index + 1 }}</td> <td>{{ beautifulPerson.name + " " + beautifulPerson.surname}}</td> <td>{{ beautifulPerson.age }}</td> </tr> </table> <!-- tworzę przycisk, pod który podpinam funkcję addElement() zainicjowaną dopiero w kontrolerze --> <p><button ng-click = "addElement()">Dodaj delikwenta</button></p> </body> <script> // tworzę moduł aplikacji za pomocą metody module, która jako argumenty przyjmuje let app = angular.module( "myFirstAngularApplicationEver", // nazwę zawartą w atrybucie ng-app [] // listę modułów, od których tworzony moduł będzie zależny (domyślnie może być pusta) ); let controller = app.controller( "myFirstControllerEver", function ($scope){ // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj: $scope.person = {name: 'myName', surname: 'mySurname', age: 18}; // tworzę zmienną, która będzie przechowywała nazwiska $scope.beautifulPeople = [ { name: 'Donald', surname: 'Tłusk', age: 61}, { name: 'Donald', surname: 'Dumb', age: 72} ]; // tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click $scope.addElement = function(){ if( $scope.person.name.length !== 0 && $scope.person.surname.length !== 0 && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){ $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age}; $scope.beautifulPeople.sort( function(a, b){ return (a.surname + a.name).localeCompare((b.surname + b.name)); } ); $scope.person.name = "myName"; $scope.person.surname = "mySurname"; }else{ alert("Wprowadź nazwisko i imię!"); } } }); </script> </html>

Fragment kodu, na który warto zwrócić uwagę:

<table> <tr><th>Nr.</th><th>Imię i nazwisko</th><th>Wiek</th></tr> <tr ng-repeat="beautifulPerson in beautifulPeople"> <td>{{ $index + 1 }}</td> <td>{{ beautifulPerson.name + " " + beautifulPerson.surname}}</td> <td>{{ beautifulPerson.age }}</td> </tr> </table>

Jak widać w znaczniku tr używam tajemniczego atrybutu ng-repeat, który zawiera dyrektywę opisującą z jakiego obiektu i do jakiej zmiennej będą wyciągane kolejne jego elementy. W tym przypadku z zmiennej beautifulPeople będą wyciągane kolejne osoby do zmiennej beautifulPerson. Tej zmiennej mogę następnie użyć w celu wypisania wszystkich elementów w tabeli. Warto też zwrócić uwagę na możliwość pozyskania indeksu danego elementu za pomocą specjalnej zmiennej $index.

Działający przykład można zobaczyć tutaj.

Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych autor: Laurence Lars Svekis, Maaike van Putten, Rob Percival

Tytuł:

JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych

Autor:

Laurence Lars Svekis, Maaike van Putten, Rob Percival

tytuł: JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript autor: Kyle Simpson

Tytuł:

JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript

Autor:

Kyle Simpson

tytuł: JavaScript dla dzieci dla bystrzaków autor: Chris Minnick, Eva Holland

Tytuł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

Tytuł:

Modularny JavaScript dla zaawansowanych

Autor:

Nicolas Bevacqua

tytuł: JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi autor: Lynn Beighley

Tytuł:

JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi

Autor:

Lynn Beighley

tytuł: Matematyka dla programistów JavaScript autor: Jacek Piechota

Tytuł:

Matematyka dla programistów JavaScript

Autor:

Jacek Piechota

tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript autor: Nicholas C. Zakas

Tytuł:

ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript

Autor:

Nicholas C. Zakas

tytuł: JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II autor: Simon Timms

Tytuł:

JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II

Autor:

Simon Timms

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona