ループ処理する

JavaScriptで指定した値をループ処理します。

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 <script>
var loopCtrl = function($scope) {
 $scope.week = [
  {"jp":"月","en":"Monday"},
  {"jp":"火","en":"Tuesday"},
  {"jp":"水","en":"Wednesday"},
  {"jp":"木","en":"Thursday"},
  {"jp":"金","en":"Friday"},
  {"jp":"土","en":"Saturday"},
  {"jp":"日","en":"Sunday"}
 ];
}
 </script>
 <div ng-controller="loopCtrl">
  <p>{{week.length}} days</p>
   <ul>
    <li ng-repeat="day in week">{{day.jp}} {{day.en}}</li>
   </ul>
 </div>
</html>
				
<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 <script src="script.js"></script>
 <div ng-controller="loopCtrl">
  <p>{{week.length}} days</p>
   <ul>
    <li ng-repeat="day in week">{{day.jp}} {{day.en}}</li>
   </ul>
 </div>
</html>
				
var loopCtrl = function($scope) {
 $scope.week = [
  {"jp":"月","en":"Monday"},
  {"jp":"火","en":"Tuesday"},
  {"jp":"水","en":"Wednesday"},
  {"jp":"木","en":"Thursday"},
  {"jp":"金","en":"Friday"},
  {"jp":"土","en":"Saturday"},
  {"jp":"日","en":"Sunday"}
 ];
}
				

ループのデモ

{{week.length}} days

  • {{day.jp}} {{day.en}}

解説

重要なポイント

  • ng-controllerで実行処理を取得
  • ng-repeatでループ処理

[ng-controller]で曜日を定義し、[ng-repeat]でループ出力しています。