AngularJSの基礎 #Angular

controllerからの値の受け渡し

controllerから$scopeを使って値を渡す

myscript.js

var mainCtrl = function($scope) {
  $scope.users = [
    {"name":"tagtag", "score":"100"},
    {"name":"namnam", "score":"30"},
    {"name":"lenlen", "score":"40"}
  ];
  $scope.today = new Date();
}

Angulerを使っているというng-appの指定を忘れずに！

index.html

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <title>AngularJSの練習</title>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>AngularJSの練習</h1>
  <input type="text" ng-model="name">
  <div ng-controller="mainCtrl">
    <p>{{users.length}} users.</p>
    // パイプオプション指定ができる
    <p>{{25 * 500|number}}</p>
    <p>{{25 * 500|currency:"¥"}}</p>
    <p>{{today|date:'yyyy-MM-dd'}}</p>
    <ul>
      // ng-repeatで配列を展開
      <li ng-repeat="user in users">
        // 大文字表記と、小数点の表記
        {{user.name|uppercase}}{{user.score|number:4}}
      </li>
    </ul>
  </div>
</body>
</html>

3 users.

12,500

¥12,500.00

2014-07-02

TAGTAG100.0000
NAMNAM30.0000
LENLEN40.0000

checkbox・radiobutton

index.html

<p>18+ <input type="checkbox" ng-model="user.adult" ng-true-value="adult" ng-false-value="child"></p>
<p>Phone:
// ng-modelを同様の名前にすれば同グループとして扱ってくれる
<input type="radio" ng-model="user.phone" value="iphone">iphone
<input type="radio" ng-model="user.phone" value="Android">Android
</p>
<p>Memo:
// {{140-user.memo.length}}で文字カウントを表示してくれる
<textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
</p>
<p><input type="submit" value="add"></p>

selectboxの値の所得(ng-options)

index.html

<p>Color:
<select ng-model="user.color" ng-options="'label:'+color for color in ['red','blue','pink']" ng-init="user.color='red'"></select>
</p>

配列を展開する(ng-repeat)

降順・昇順・上位でソート

index.html

<ul>
  // orderByで降順、limitToで上位3つ
  <li ng-repeat="user in users|orderBy:'score'|limitTo:3">
    {{user.name}}{{user.score}}
  </li>
</ul>

formの入力値でソート

index.html

// 「query.name」name条件でソート
<p><input type="text" ng-model="query.name"></p>
<ul>
    // 入力値でfilter
    <li ng-repeat="user in users|filter:query">
        {{user.name}}{{user.score}}
    </li>
</ul>

出力される要素の順番

index.html

// $indexが要素の順番
// $first等は要素の一番上か、真ん中か、下かを表している
<li ng-repeat="user in users|filter:query">
    {{$index+1}} {{$first}} {{$middle}} {{$last}} {{user.name}}{{user.score}}
</li>

controllerを入れ子にする

ng-controller="userItemCtrl" を追加

index.html

<div ng-controller="mainCtrl">
    <ul>
      <li ng-repeat="user in users" ng-controller="userItemCtrl">
        {{user.name}}{{user.score}}
        <button ng-click="increment()">+1</button>
      </li>
    </ul>
</div>

親要素の内容を継承するので、そのまま子要素で使える

myscript.js

var mainCtrl = function($scope) {
  $scope.users = [
    {"name":"tagtag", "score":"100"},
    {"name":"namnam", "score":"30"},
    {"name":"lenlen", "score":"40"},
    {"name":"tagtag", "score":"100"},
    {"name":"namnam", "score":"30"},
    {"name":"lenlen", "score":"40"},
    {"name":"tagtag", "score":"100"},
    {"name":"namnam", "score":"30"},
    {"name":"lenlen", "score":"40"},
    {"name":"tagtag", "score":"100"},
    {"name":"namnam", "score":"30"},
    {"name":"lenlen", "score":"40"}
  ];
  $scope.today = new Date();
}

var userItemCtrl = function($scope) {
  $scope.increment = function() {
    $scope.user.score++;
  }
}

formのvalidation

必須項目の入力チェック

index.html

// novalidateでhtml5のvalidatinを無効化する
<form novalidate name="myForm" ng-submit="addUser()">
  <p>Name:<input type="text" name="name" ng-model="user.name" required ng-minlength="4" ng-maxlength="10">
  <span ng-show="myForm.name.$error.required">required</span>
  <span ng-show="myForm.name.$error.minlength">too short</span>
  <span ng-show="myForm.name.$error.maxlength">too long</span>
  </p>
  <p><input type="submit" value="add"></p>
</form>

email・urlの入力チェック

index.html

<p>Score:
<input type="number" name="score" ng-model="user.score">
</p>
<p>Email:
<input type="email" name="email" ng-model="user.email">
<span ng-show="myForm.email.$error.email">not email</span>
</p>
<p>Url:
<input type="url" name="url" ng-model="user.url">
<span ng-show="myForm.url.$error.url">not url</span>
</p>

TODOリストを作ってみよう

index.html

<div ng-controller="mainCtrl">
  <p>Finished task: {{getDoneCount()}} / {{tasks.length}}
  <button ng-click="deleteDone()">Deleate task</button>
  </p>
  <ul>
    <li ng-repeat="task in tasks">
      // checkboxのng-modelは指定するとbooleanになる(?)
      <input type="checkbox" ng-model="task.done">
      <span class="done-{{task.done}}">{{task.body}}</span>
      <a href ng-click="tasks.splice($index,1)">[x]</a>
    </li>
  </ul>
  <form ng-submit="addNew()">
    <input type="text" ng-model="newTaskBody">
    <input type="submit" value="add">
  </form>
</div>

Anguler.js

var mainCtrl = function($scope, $http) {
  $scope.tasks = [
    {"body":"do this 1", "done":false},
    {"body":"do this 2", "done":false},
    {"body":"do this 3", "done":true},
    {"body":"do this 4", "done":false},
  ];
  $scope.addNew = function() {
    // pushメソッドで配列に追加する
    $scope.tasks.push({"body":$scope.newTaskBody,"done":false});
    $scope.newTaskBody = '';
  }
  $scope.getDoneCount = function() {
    var count = 0;
    angular.forEach($scope.tasks, function(task) {
      count += task.done ? 1 : 0;
    });
    return count;
  }
  $scope.deleteDone = function() {
    var oldTasks = $scope.tasks;
    $scope.tasks = [];
    angular.forEach(oldTasks, function(task) {
      if (!task.done) $scope.tasks.push(task);
    });
  }
}