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

Stronę tą wyświetlono już: 102 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:

Listing 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <script src="AngularJS.min.js"></script>
  6. <style>
  7. label{
  8. display: inline-block;
  9. width: 150px;
  10. }
  11. </style>
  12. </head>
  13. <body ng-app = "myFirstAngularApplicationEver" ng-controller = "myFirstControllerEver">
  14. <p><label for = "personName">Imię:</label><input type="text" ng-model = "person.name" name = "personName"/></p>
  15. <p><label for = "personSuraname">Nazwisko: </label><input type = "text" ng-model = "person.surname" name = "personSurname"/></p>
  16. <p><label for = "personAge">Wiek:</label><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></p>
  17. <p>{{ person.name + " " + person.surname}}</p>
  18. <table>
  19. <tr><th>Nr.</th><th>Imię i nazwisko</th><th>Wiek</th></tr>
  20. <tr ng-repeat="beautifulPerson in beautifulPeople">
  21. <td>{{ $index + 1 }}</td>
  22. <td>{{ beautifulPerson.name + " " + beautifulPerson.surname}}</td>
  23. <td>{{ beautifulPerson.age }}</td>
  24. </tr>
  25. </table>
  26. <!-- tworzę przycisk, pod który podpinam funkcję addElement() zainicjowaną dopiero w kontrolerze -->
  27. <p><button ng-click = "addElement()">Dodaj delikwenta</button></p>
  28. </body>
  29. <script>
  30. // tworzę moduł aplikacji za pomocą metody module, która jako argumenty przyjmuje
  31. let app = angular.module(
  32. "myFirstAngularApplicationEver", // nazwę zawartą w atrybucie ng-app
  33. [] // listę modułów, od których tworzony moduł będzie zależny (domyślnie może być pusta)
  34. );
  35. let controller = app.controller(
  36. "myFirstControllerEver",
  37. function ($scope){
  38. // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj:
  39. $scope.person = {name: 'myName', surname: 'mySurname', age: 18};
  40. // tworzę zmienną, która będzie przechowywała nazwiska
  41. $scope.beautifulPeople = [
  42. { name: 'Donald', surname: 'Tłusk', age: 61},
  43. { name: 'Donald', surname: 'Dumb', age: 72}
  44. ];
  45. // tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click
  46. $scope.addElement = function(){
  47. if(
  48. $scope.person.name.length !== 0 && $scope.person.surname.length !== 0
  49. && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
  50. $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
  51. $scope.beautifulPeople.sort(
  52. function(a, b){
  53. return (a.surname + a.name).localeCompare((b.surname + b.name));
  54. }
  55. );
  56. $scope.person.name = "myName";
  57. $scope.person.surname = "mySurname";
  58. }else{
  59. alert("Wprowadź nazwisko i imię!");
  60. }
  61. }
  62. });
  63. </script>
  64. </html>

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

Listing 2
  1. <table>
  2. <tr><th>Nr.</th><th>Imię i nazwisko</th><th>Wiek</th></tr>
  3. <tr ng-repeat="beautifulPerson in beautifulPeople">
  4. <td>{{ $index + 1 }}</td>
  5. <td>{{ beautifulPerson.name + " " + beautifulPerson.surname}}</td>
  6. <td>{{ beautifulPerson.age }}</td>
  7. </tr>
  8. </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.

Komentarze