Repeat

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

・experts

・jp

次のリンクをクリックすると "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)