AngularJS - zmienne inicjujące i atrybut ng-init

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

Często aplikacje AngularJS wykorzystują zmienne inicjalizujące, które można umieścić w atrybucie ng-init i wykorzystać np. do inicjalizacji kontrolek wartościami początkowymi oraz ustawienia początkowego treści strony. Taki prosty przykład wykorzystania tegoż atrybutu można zobaczyć na poniższym listingu.

Listing 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <script src="AngularJS.min.js"></script>
  6. </head>
  7. <body ng-app = "" ng-init = "person = {name: 'myName', surname: 'mySurname'}">
  8. <p>Imię: <input type="text" ng-model = "person.name"/></p>
  9. <p>Nazwisko: <input type = "text" ng-model = "person.surname"/></p>
  10. <p>{{ person.name + " " + person.surname}}</p>
  11. </body>
  12. </html>

Jak widać zmienna person zawiera dwa pola name oraz surname, które zostały przypisane do elementów typu input oraz w jakże przebiegły sposób wykorzystane zostały w kodzie strony do wyświetlenia wpisanych wartości.

Zmienne inicjalizujące nie muszą być tak złożone jak powyżej, mogą to być zwykłe zmienne liczbowe lub tekstowe jak również zmienne tablicowe. Oto fragment kodu tworzącego zmienne innych typów:

Listing 2
  1. ng-init = "age = 10; name = 'myName'; surname = 'mySurname'; table = [0, 1, 2]"

Działanie kodu z Listingu 1 można zobaczyć tutaj

Komentarze