Przykładowy widok poniżej prezentuje działanie dyrektyw ng-repeat, ng-controller oraz ng-click.
<body ng-controller="CountriesController"> <ul> <li ng-repeat="country in countries"> <div> <span> Name : <strong>{{country.name}}</strong> </span> <span> Capital City : <strong>{{country.capital}}</strong> </span> </div> </li> </ul> <p> Total countries in Benelux : {{countries.length}} </p> <button ng-click="removeLast()">Remove last item</button> </body>
Aby wykonać data-binding, należy podać nazwę kontrolera, za pomocą atrybutu ng-controller umieszczanego wewnątrz tagu body. AngularJS po napotkaniu takiej dyrektywy zacznie poszukiwanie funkcji o identycznej nazwie w plikach js. Kolejna instrukcja to ng-repeat, czyli odpowiednik pętli foreach z języka C#, Umożliwia ona binding do kolekcji obiektów i stworzenie szablonu dla pojedynczego obiektu. Za pomocą ng-click, możemy podać jaka akcja ma się wykonać po kliknięciu w element. W powyższym przykładzie będzie to funkcja removeLast zdefiniowana w kontrolerze.
//funkcja konstruktora dla country var Country = function(name,capital) { this.name = name; this.capital = capital; } function CountriesController($scope) { $scope.countries = [ new Country("Netherlands","The Hague"), new Country("Belgium","Brussels"), new Country("Luxembourg","Luxembourg") ]; $scope.removeLast = function(){ var index = $scope.countries.length - 1; $scope.countries.splice(index, 1); } }
Funkcja kontrolera wywoływana z parametrem $scope, definiuje model danych oraz zachowania poprzez odpowiednie funkcje. Zmiany przeprowadzane na kolekcji (np. usunięcie elementu), spowodują natychmiastowe odświeżenie widoku.
Kolejną prostą do dodania funkcjonalnością jest przeszukiwanie pełno-tekstowe (Full Text Search), które nie korzysta w żaden sposób z kontrolera (!).
Aby móc przeszukiwać kolekcję, do której wpięliśmy data-binding, należy zmodyfikować ng-repeat o dyrektywę filtru.
<li ng-repeat="country in countries | filter:query">
Dodatkowo wystarczy dodać element input, do którego użytkownik będzie mógł wpisać swoje zapytanie.
<input type="text" ng-model="query">
W przypadku kolekcji obiektów przeszukane zostaną wszystkie properties i element zostanie zwrócony, jeżeli jakakolwiek zawiera podaną przez użytkownika frazę.
Aby zastosować binding w dwie strony, wystarczy dodać property query do elementu $scope w kontrolerze. Dzięki temu możemy na przykład wypisywać i resetować zapytanie.
<label>{{query}}</label> <!-- ... --> <button ng-click="resetQuery()">Reset query</button>
function CountriesController($scope) { $scope.query = ''; $scope.resetQuery = function(){ $scope.query = ''; } }
Binding automatycznie odświeży zarówno UI, jak i filtr wyszukiwania.
Brak komentarzy:
Prześlij komentarz