Repeat

<li> の中で ng-repeat を使って繰り返します。

次のリンクをクリックすると "ngp_repeat.html" が呼び出されます。
Repeat

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_repeat.html" です。
    <!doctype html>
    <html ng-app>
    
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    </head>
    
    <body>
      <ul ng-init="items = ['html5', 'experts', 'jp']">
        <li ng-repeat="item in items">
          <p ng-bind="item"</p>
        </li>
      </ul>
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. ng-init で登録するデータ(文字列)を配列として定義します。
      <ul ng-init="items = ['html5', 'experts', 'jp']">
    
  4. 登録されたデータ(items)を ng-repeat で繰り返して、ng-bind="item" で表示します。
    JavaScript の繰り返し文を使わなくても ng-repeat で繰り返し処理を行うことができます。
        <li ng-repeat="item in items">
          <p ng-bind="item"</p>
        </li>
    

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)