AngularJS proste operacje na tabeli i liście

Czas czytania: 2 minut

Dzisiaj zrobimy coś bardziej praktycznego. Teoria dla wielu osób przeważnie jest nudna (w tym i dla mnie) ?. Dlatego dziś zrobimy coś bardziej praktycznego.

Mini projekt, który chce zrealizować w tej lekcji to sortowanie danych z tablicy. Używając określenia tablica mam na myśli uproszczone wersję bezy danych. Prostą tabelę z informacjami.

Budowa prostej tablicy z danymi

Moja tablica dla prostoty będzie składać się tylko z 2 kolumn i 4 wierszy. Najprościej zobrazuję to na przykładzie tabeli:

Imię	Nazwisko
Jan	Kowalski
Anna	Nowak
Maria	Kowal
Tomasz	Nowicki

Dla ułatwienia dodałam 5 wiersz z nagłówkiem. Czyli już wiecie, że będę operowała danymi Imię i Nazwisko (dla wyrobienia dobrych nawyków lepiej używać angielskich nazw pól). Na początku dla osób, które nigdy nie pracowały z obiektami takimi jak baza danych może to się wydać nieco dziwne.

Jak zapisać dane?

Dane możemy zapisać na kilka sposobów. W tym konkretnym przypadku skorzystamy z ng-init:

ng-init="names=[
{name:'Jan',surname:'Kowalski'},
{name:'Anna',surname:'Nowak'},
{name:'Maria',surname:'Kowal'},
{name:'Tomasz',surname:'Nowicki'}]"

Jak widzicie nie jest to jakoś specjalnie skomplikowane. Każdy wiersz znajduje się pomiędzy klamrami {} następnie podajemy nazwę pola oraz w cudzysłowie wartość. Nazwy pul z wartościami udzielamy przecinkami. Nasza tablica nosi też nazwą „names”

Jak wypisać zawartość?

Wypisywanie pojedynczych ciągów wyrazów do trudnych nie należy, ale jak wypisać tabelę?

W tym wypadku przyda się nam operator/detektywa ng-repeat. Z jej pomocą będziemy mogli wypisać nasze dane, jednak najpierw trzeba ją będzie skonfigurować.

W tym celu deklarujemy: ng-repeat=”x in names” – struktura jest analogiczna jak w innych pętlach.

Powyższy kod stworzy pętlę, która zakończy się w momencie gdy zabraknie elementów tablicy.

<div ng-app="" ng-init="names=[ 
{name:'Jan',surname:'Kowalski'}, 
{name:'Anna',surname:'Nowak'}, 
{name:'Maria',surname:'Kowal'}, 
{name:'Tomasz',surname:'Nowicki'}]">

<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.surname}}</li>
</ul>

</div>

Po złożeniu wygląda to tak:

See the Pen AngularJS list by Aura (@Julka85) on CodePen.0

No dobrze posiadamy już listę, ale co z jej sortowaniem? I jak uzyskać wygląd tabeli?

Budujemy prosty moduł z danymi

Teraz wprowadzimy zmiany w strukturze naszej aplikacji. Pierwszą poważną będzie przeniesienie naszych danych do modułu. Jak zbudować prosty moduł napisałam w poprzedniej lekcji.

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jan',surname:'Kowalski'},
    {name:'Anna',surname:'Nowak'}, 
    {name:'Maria',surname:'Kowal'}, 
    {name:'Tomasz',surname:'Nowicki'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Jak widać wszystkie nasze elementy zostały przeniesione do elementu $scope.names. Od tej chwili to na nim „będziemy wykonywać operację”.

Kod HTML w tym wypadku będzie wyglądał następująco:

<div ng-app="myApp" ng-controller="namesCtrl" class="conteiner">
 
<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('surname')">Surname</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.surname}}</td>
  </tr>
</table>
 
</div>

W znaczniku ng-app wywołujemy modół myApp.

Poniżej możecie zobaczyć efekt końcowy (trochę go pokolorowałam ?).

See the Pen Order by by Aura (@Julka85) on CodePen.

Zadanie domowe dla chętnych: Zbuduj prosty mechanizm filtrujący dane tabeli lub listy składającej się z minimum 5 wierszy i 3/4 kolumn. ?