AngularJS lezione 3: ripetere elementi HTML

La innovativa framework AngularJS permette anche di ripetere elementi HTML come negli esempi seguenti.

Impostare prima un array con gli elementi da inserire nella lista in ng-init, poi inserire l’attributo ng-repeat dentro l’elemento da ripetere.

<div ng-app="" ng-init="nomi=['Marco','Giovanni','Franco']">
  <ul>
    <li ng-repeat="x in nomi">
      {{ x }}
    </li>
  </ul>
<div>

Risultato:

  • Marco
  • Giovanni
  • Franco
<div ng-app="" ng-init="nomi=[
{macchina:'Ferrari',paese:'Italia'},
{macchina:'Porsche',paese:'Francia'},
{macchina:'Seat Ibiza',paese:'Spagna'}]">

<ul>
  <li ng-repeat="x	in nomi">
    {{ x.macchina + ',  ' + x.paese }}
  </li>
</ul>

</div>

Risultato:

  • Ferrari, Italia
  • Porsche, Francia
  • Seat Ibiza, Spagna
Questa voce è stata pubblicata in AngularJS e contrassegnata con , , , . Contrassegna il permalink.

Una risposta a AngularJS lezione 3: ripetere elementi HTML

  1. It’s a pity you don’t have a donate button! I’d without
    a doubt donate to this fantastic blog! I suppose for now i’ll settle for book-marking and adding your
    RSS feed to my Google account. I look forward to brand new updates and will share this website
    with my Facebook group. Talk soon!

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>