AngularJSを試してみる - yk5656 diary (旧)

AngularJSを試してみる。

演算

{{}}内で演算ができる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
  <h1>演算</h1>
  <p>2 + 3 = {{2 + 3}}</p>
  <p>2 - 3 = {{2 - 3}}</p>
  <p>2 * 3 = {{2 * 3}}</p>
  <p>2 / 3 = {{2 / 3}}</p>
</body>
</html>

変数

変数を定義することができる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
  <h1>変数</h1>
  <div ng-init="x = 2; y = 3;">
    <p>2 + 3 = {{x + y}}</p>
    <p>2 - 3 = {{x - y}}</p>
    <p>2 * 3 = {{x * y}}</p>
    <p>2 / 3 = {{x / y}}</p>
  </div>
</body>
</html>

コントローラー

コントローラで変数を設定する場合は下記のような感じ。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var test1Ctrl = function($scope) {
      $scope.x = 2;
      $scope.y = 3;
    }
  </script>
</head>
<body>
  <h1>コントローラー</h1>
  <div ng-controller="test1Ctrl">
    <p>2 + 3 = {{x + y}}</p>
    <p>2 - 3 = {{x - y}}</p>
    <p>2 * 3 = {{x * y}}</p>
    <p>2 / 3 = {{x / y}}</p>
  </div>
</body>
</html>

フィルター

いろいろフィルターがある。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var test2Ctrl = function($scope) {
      $scope.num_var  = 1234.567;
      $scope.str_var  = "Hello, world!";
      $scope.date_var = new Date();
      $scope.arr_var  = [100, 200, 300];
    }
  </script>
</head>
<body>
  <h1>フィルター</h1>

  <h2>フィルター無し</h2>
  <div ng-controller="test2Ctrl">
    <p>num_bar  = {{num_var}}</p>
    <p>str_var  = {{str_var}}</p>
    <p>date_var = {{date_var}}</p>
    <p>arr_var  = {{arr_var}}</p>
  </div>

  <h2>フィルター有り</h2>
  <div ng-controller="test2Ctrl">
    <p>数値にカンマ = {{num_var|number}}</p>
    <p>小数点１桁   = {{num_var|number:1}}</p>
    <p>通貨（円）   = {{num_var|currency:'\'}}</p>
    <p>大文字へ変換 = {{str_var|uppercase}}</p>
    <p>小文字へ変換 = {{str_var|lowercase}}</p>
    <p>日付形式指定 = {{date_var|date:'yyyy年M月d日'}}</p>
    <p>配列の数制限 = {{arr_var|limitTo:2}}</p>
  </div>
</body>
</html>

クリック

ng-clickでクリックできる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
  <h1>クリック</h1>
  <a href="javascript:void(0)" ng-init="cnt = 10" ng-click="cnt = cnt + 1">カウント</a><br />
  カウント = {{cnt}}<br />
</body>
</html>

カウントをクリックすると、カウントが1増える。

クリック（メソッド）

上記のクリックをメソッドを使って実装すると下記のようになる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var test3Ctrl = function($scope) {
      $scope.cnt = 10;
      $scope.incrementCount = function() {
        $scope.cnt = $scope.cnt + 1;
      }
    }
  </script>
</head>
<body>
  <h1>クリック（メソッド）</h1>
  <div ng-controller="test3Ctrl">
    <a href="javascript:void(0)" ng-click="incrementCount()">カウント</a><br />
    カウント = {{cnt}}<br />
  </div>
</body>
</html>

ループ

ng-repeatでループできる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var test4Ctrl = function($scope) {
      $scope.items = [
        {"name": "商品１", "price":200, "num":1},
        {"name": "商品２", "price":200, "num":2},
        {"name": "商品３", "price":200, "num":3},
        {"name": "商品４", "price":100, "num":1},
        {"name": "商品５", "price":100, "num":2},
        {"name": "商品６", "price":100, "num":3},
      ];
    }
  </script>
  <style>
    .odd-class {
      background: red;
    }
    .even-class {
      background: blue;
    }
  </style>
</head>
<body>
  <h1>ループ</h1>
  <div ng-controller="test4Ctrl">
    <ul>
      <li ng-repeat="item in items">
      name={{item.name}} price={{item.price}} num={{item.num}}
      </li>
    </ul>
  </div>
</body>
</html>

ループ（応用）

ng-repeatにもフィルターが指定できる。
ng-class-oddやng-class-evenで奇数・偶数のクラスを指定できる。
ng-repeatでは$indexや$first,$lastのような特殊なプロパティが参照できる。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script>
    var test4Ctrl = function($scope) {
      $scope.items = [
        {"name": "商品１", "price":200, "num":1},
        {"name": "商品２", "price":200, "num":2},
        {"name": "商品３", "price":200, "num":3},
        {"name": "商品４", "price":100, "num":1},
        {"name": "商品５", "price":100, "num":2},
        {"name": "商品６", "price":100, "num":3},
      ];
    }
  </script>
  <style>
    .odd-class {
      background: red;
    }
    .even-class {
      background: blue;
    }
  </style>
</head>
<body>
  <h1>ループ（応用）</h1>
  <div ng-controller="test4Ctrl">
    <ul>
      <li ng-repeat="item in items | orderBy:'price' | orderBy:'-num' | limitTo:4"
	      ng-class-odd="'odd-class'" ng-class-even="'even-class'">
      name={{item.name}} price={{item.price}} num={{item.num}} index={{$index}} first={{$first}} last={{$last}} 
      </li>
    </ul>
  </div>
</body>
</html>