AngularJSコードサンプル

AngularJS : 1.6.5
Bootstrap : 3.3.7
 
※v1.2.3のサンプルはこちら
 
■目次
(1)データバインディング
(2)ng-repeatで表、リストを作成、フィルターを適用
(3)ng-includeを使って外部ファイルのHTMLを埋め込み
(4)ng-switchを使って内部HTMLの表示を切り替え
(5)ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
(6)ng-class、ng-styleを使ってCSSを設定
(7)イベントを処理するディレクティブ
(8)有効、無効を切替えるディレクティブ
(9)フォームの入力チェックとCSS設定
(10)ng-optionsを使ってSelectメニューを作成
(10.1)ng-repeatを使ってラジオボタンを作成
(11)ビルトインのフィルターの使い方
(12)ビルトインのフィルターで関数を使用
(13)カスタムフィルター
(14)AngularJSとBootstrap3を使ってページング
(15)スクリプト内でフィルターを使用、既存のフィルターを拡張
 

(1)データバインディング

1)Wayデータバインディング

1)二重波括弧:私は{{country}}在住です。
2)ng-bind:私は在住です。
3)二重波括弧:私は{{country}}在住の{{gender}}です。
4)ng-bind-template:私は{{country}}在住の{{gender}}です。
二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。

 
2)2Wayデータバインディング

私の名前は{{name}}です。

名前:

<strong>1)Wayデータバインディング</strong>
<div>1)二重波括弧:私は{{country}}在住です。</div>
<div>2)ng-bind:私は<span ng-bind="country"></span>在住です。</div>
<div>3)二重波括弧:私は{{country}}在住の{{gender}}です。</div>
<div>4)ng-bind-template:私は{{country}}在住の{{gender}}です。</div>
<div ng-non-bindable>二重波括弧{{....}}を表示するには、ng-non-bindableを使用。</div>
 
<strong>2)2Wayデータバインディング</strong>
<div>私の名前は{{name}}です。</div>
名前:<input ng-model="name" />
var demoApp = angular.module('demoApp', []);
demoApp.controller("bindingCtrl", function ($scope) {
  $scope.country = "日本";
  $scope.gender = "男性";
  $scope.name = "初期値";
});

(2)ng-repeatで表、リストを作成、フィルターを適用

1)ng-repeatを使って表を作成

名前 年齢
{{person.name}} {{person.age}}

2)ng-repeatのビルトイン変数を使用

No. 名前 年齢
{{$index + 1}} {{person.name}} {{person.age}}

3)ng-repeatを入力文字列でフィルター
 
フィルター:

  • {{person.name}} ({{person.age}}) {{person.address}}
<strong>1)ng-repeatを使って表を作成</strong>
<table class="table">
  <thead>
    <tr><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

<strong>2)ng-repeatのビルトイン変数を使用</strong>
<table class="table">
  <thead>
    <tr><th>No.</th><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people" ng-class="$odd ? 'bg-success' : 'bg-warning'">
      <td>{{$index + 1}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

<strong>3)ng-repeatを入力文字列でフィルター</strong>

フィルター:<input ng-model="query" type="text" placeholder="表示したい名前、住所、年齢を入力" autofocus>
<ul>
  <li ng-repeat="person in people | filter: query | orderBy: 'age' ">{{person.name}} ({{person.age}}) {{person.address}}</li>
</ul>
var demoApp = angular.module('demoApp', []);
demoApp.controller("repeatCtrl", function($scope) {
  $scope.people = [
    { name: "相田", age: 20 ,address: "東京都品川区"},
    { name: "伊藤", age: 55 ,address: "神奈川県横浜市"},
    { name: "上野", age: 20 ,address: "埼玉県川越市"},
    { name: "江藤", age: 37 ,address: "東京都世田谷区"},
    { name: "岡田", age: 20 ,address: "千葉県松戸市"},
    { name: "加藤", age: 32 ,address: "東京都府中市"}
  ];
});

(3)ng-includeを使って外部ファイルのHTMLを埋め込み

1)ng-includeを使って外部ファイルのHTMLを埋め込み

この下に外部HTMLファイルの内容を埋め込み

この上に外部HTMLファイルの内容を埋め込み

2)条件に応じて表示する外部HTMLを切り替え
 

リスト

<strong>1)ng-includeを使って外部ファイルのHTMLを埋め込み</strong>
<div class="well well-sm">この下に外部HTMLファイルの内容を埋め込み</div>
<ng-include src="'http://example.com/wp-content/themes/wp/template/include_table.html'"></ng-include>
<div class="well well-sm">この上に外部HTMLファイルの内容を埋め込み</div>

<strong>2)条件に応じて表示する外部HTMLを切り替え</strong>
 <br />
<form>
<input type="radio" ng-model="includeFile" value="list">リスト<input type="radio" ng-model="includeFile" value="table">表
</form>
<ng-include src="switchHtml()"></ng-include>
var demoApp = angular.module('demoApp', []);
demoApp.controller("includeCtrl", function($scope) {
  $scope.people = [
    { name: "相田", age: 20 ,address: "東京都品川区"},
    { name: "伊藤", age: 55 ,address: "神奈川県横浜市"},
    { name: "上野", age: 20 ,address: "埼玉県川越市"},
    { name: "江藤", age: 37 ,address: "東京都世田谷区"},
  ];

  var url = 'http://example.com/wp-content/themes/wp/template/';

  $scope.switchHtml = function () {
    if ($scope.includeFile == "list"){
      return url + "include_list.html";
    } else if ($scope.includeFile == "table"){
      return url + "include_table.html";
    }
  }
});

(include_list.html)
<ul>
  <li ng-repeat="person in people">{{person.name}} ({{person.age}}) {{person.address}}</li>
</ul>

(include_table.html)
<table class="table">
  <thead>
    <tr><th>名前</th><th>年齢</th><th>住所</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.address}}</td>
    </tr>
  </tbody>
</table>

(4)ng-switchを使って内部HTMLの表示を切り替え


以下のサンプルでは、UI Bootstrapのバージョン2.5.0のアコーディオンの機能を利用しています。
http://angular-ui.github.io/bootstrap/

ng-switchを使って内部にあるHTMLの表示を切り替え
 

リストアコーディオン

 

名前 年齢 住所
{{person.name}} {{person.age}} {{person.address}}
  • {{person.name}} ({{person.age}}) {{person.address}}

  • 年齢:{{person.age}}
  • 住所:{{person.address}}

上のラジオボタンで選択したフォーマットでデータが表示されます。
<form>
<input type="radio" ng-model="switch" value="list">リスト<input type="radio" ng-model="switch" value="table">表<input type="radio" ng-model="switch" value="accordion">アコーディオン
</form>
<div ng-switch on="switch">
  <div ng-switch-when="table">
    <table class="table">
      <thead>
        <tr><th>名前</th><th>年齢</th><th>住所</th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in people">
          <td>{{person.name}}</td>
          <td>{{person.age}}</td>
          <td>{{person.address}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="list">
    <ul>
      <li ng-repeat="person in people">{{person.name}} ({{person.age}}) {{person.address}}</li>
    </ul>
  </div>
  <div ng-switch-when="accordion">
    <uib-accordion close-others=true>
      <div uib-accordion-group class="panel-default"
                               heading="{{person.name}}"
                               ng-repeat="person in people">
          <ul>
            <li>年齢:{{person.age}}</li>
            <li>住所:{{person.address}}</li>
          </ul>
      </div>
    </uib-accordion>
  </div>
  <div ng-switch-default>
    上のラジオボタンで選択したフォーマットでデータが表示されます。
  </div>
</div>
var demoApp = angular.module('demoApp', ['ui.bootstrap']);
demoApp.controller("includeCtrl", function($scope) {
  $scope.people = [
    { name: "相田", age: 20 ,address: "東京都品川区"},
    { name: "伊藤", age: 55 ,address: "神奈川県横浜市"},
    { name: "上野", age: 20 ,address: "埼玉県川越市"},
    { name: "江藤", age: 37 ,address: "東京都世田谷区"},
  ];
});

(5)ng-if、ng-show、ng-hideを使って表示、非表示を切り替え

1)ng-ifを使って表示、非表示を切り替え
 

  • {{person.name}}
    • 年齢:{{person.age}}
    • 住所:{{person.address}}

2)ng-showを使って表示、非表示を切り替え
 

  • {{person.name}}
    • 年齢:{{person.age}}
    • 住所:{{person.address}}
<strong>1)ng-ifを使って表示、非表示を切り替え</strong>
 
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="detail" />詳細表示
    </label>
  </div>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <div ng-if="detail">
        <ul>
          <li>年齢:{{person.age}}</li>
          <li>住所:{{person.address}}</li>
        </ul>
      </div>
    </li>
  </ul>
<strong>2)ng-showを使って表示、非表示を切り替え</strong>
 
<style>
  .detail > *:first-child {font-weight: bold}
</style>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <ul class="detail">
        <li ng-show="person.age_v">年齢:{{person.age}}</li>
        <li ng-show="person.address_v">住所:{{person.address}}</li>
      </ul>
    </li>
  </ul>
var demoApp = angular.module('demoApp', []);
demoApp.controller("includeCtrl", function($scope) {
  $scope.people1 = [
    { name: "相田", age: 20, age_v: true, address: "東京都品川区",address_v: fal
se},
    { name: "伊藤", age: 55, age_v: false, address: "神奈川県横浜市",address_v:
true},
    { name: "上野", age: 20, age_v: true,address: "埼玉県川越市",address_v: true
},
    { name: "江藤", age: 37, age_v: false,address: "東京都世田谷区",address_v: f
alse},
  ];
});

(6)ng-class、ng-styleを使ってCSSを設定

1)ng-class、ng-styleを使ってCSSを設定
 

  • {{person.name}}
    • 年齢:{{person.age}}
    • 住所:{{person.address}}

 
2)ng-class-even、ng-class-oddを使ってng-repeatの表をストライピング
 

No. 名前 年齢
{{$index + 1}} {{person.name}} {{person.age}}
1)ng-class、ng-styleを使ってCSSを設定
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="danger" />ng-classでCSS設定
    </label>
  </div>
  <ul ng-class="{'bg-warning': danger}">
    <li ng-repeat="person in people">{{person.name}}
      <ul>
        <li ng-style="{color:'red'}">年齢:{{person.age}}</li>
        <li ng-class="danger ? ['bg-success','text-danger']:['bg-danger','text-success']">住所:{{person.address}}</li>
      </ul>
    </li>
  </ul>
 
2)ng-class-even、ng-class-oddを使ってng-repeatの表をストライピング
 
<style>
  tr.tbl-bg-clr-odd { background-color: lightpink; }
  tr.tbl-bg-clr-even { background-color: lightgreen;}
</style>
<table class="table">
  <thead>
    <tr><th>No.</th><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in people" ng-class-even="tblBgClr.even" ng-class-odd="tblBgClr.odd">
      <td>{{$index + 1}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </tbody>
</table>

var demoApp = angular.module('demoApp', []);
demoApp.controller("includeCtrl", function($scope) {
  $scope.people = [
    { name: "相田", age: 20 ,address: "東京都品川区"},
    { name: "伊藤", age: 55 ,address: "神奈川県横浜市"},
    { name: "上野", age: 20 ,address: "埼玉県川越市"},
    { name: "江藤", age: 37 ,address: "東京都世田谷区"},
  ];
  $scope.tblBgClr = {
    odd: "tbl-bg-clr-odd",
    even: "tbl-bg-clr-even"
  }
});

(7)イベントを処理するディレクティブ

マウスイベントを使ってボタンの色を変更
 

ボタンにマウスを合わせる、離す、クリックすると色が変わります。

 

  <p>ボタンにマウスを合わせる、離す、クリックすると色が変わります。</p>
  <button class="btn" ng-class="btnColor1"
          ng-click="btnColor1='btn-success'"
          ng-mouseenter="btnColor1='btn-primary'"
          ng-mouseleave="btnColor1='btn-defult'"
  >
    イベント処理1
  </button>
  <button class="btn" ng-class="btnColor2"
          ng-click="handleEvent($event)"
          ng-mouseenter="handleEvent($event)"
          ng-mouseleave="handleEvent($event)"
  >
    イベント処理2
  </button>

var demoApp = angular.module('demoApp', []);
demoApp.controller("includeCtrl", function($scope) {
  $scope.handleEvent = function (e) {
    console.log("イベントのタイプ: " + e.type);
    switch (e.type){
      case "mouseover":
        $scope.btnColor2 = "btn-primary";
        break;
      case "mouseenter":
        $scope.btnColor2 = "btn-primary";
        break;
      case "click":
        $scope.btnColor2 = "btn-success";
        break;
      default:
        $scope.btnColor2 = "btn-default";
        break;
    }
  }
});

(8)有効、無効を切替えるディレクティブ

有効、無効を切り替え
 
1)ng-disabled ボタンの有効無効を切り替え

2)ng-checked チェックボックスのチェックを切り替え
最上部チェック有効
3)ng-readonly 読込専用を切り替え

4)ng-selected 選択、未選択を切り替え


<input type="checkbox" ng-model="checkValue">有効、無効を切り替え
1)ng-disabled ボタンの有効無効を切り替え
  <button class="btn btn-success" ng-disabled="checkValue">ボタン</button><br />
2)ng-checked チェックボックスのチェックを切り替え
  <input type="checkbox" ng-checked="checkValue">最上部チェック有効<br />
3)ng-readonly 読込専用を切り替え
  <input type="text" ng-readonly="checkValue" value="最上部チェックで読込専用"/><br />
4)ng-selected 選択、未選択を切り替え
  <select>
    <option selected>選択肢1</option>
    <option>選択肢2</option>
    <option ng-selected="checkValue">最上部チェックで有効</option>
  </select>

(9)フォームの入力チェックとCSS設定

AngularJSのフォームで入力チェック、CSS設定



必須項目: 会員番号を入力してください。文字数: 5文字以上。文字数: 10文字以内。文字種: 半角英大文字アルファベットと数字。


必須項目: メールアドレスを入力しでください。メールフォーマットエラー: 正しいメールアドレスフォーマットを入力してください。

入力内容
{{master | json}}

<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
<form name="appForm" novalidate>
  <div class="well">
    <div class="form-group" ng-class="{'has-error': appForm.name.$invalid && appForm.name.$dirty}">
      <label>会員番号(必須項目、半角英大文字or半角数字5~10文字)</label>
      <input type="text" name="name" class="form-control"
         ng-model="user.name" required
         ng-minlength="5" ng-maxlength="10"
         ng-pattern="/^[A-Z0-9]+$/" />
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.required">必須項目: 会員番号を入力してください。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.minlength">文字数: 5文字以上。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.maxlength">文字数: 10文字以内。</span>
      <span class="text-danger" ng-show="appForm.name.$dirty && appForm.name.$error.pattern">文字種: 半角英大文字アルファベットと数字。</span>
    </div>

    <div class="form-group" ng-class="{'has-error': appForm.email.$invalid && appForm.email.$dirty}">
      <label>メールアドレス(必須項目、メールフォーマットチェック)</label>
      <input type="email" name="email" class="form-control"
        ng-model="user.email" required />
      <span class="text-danger" ng-show="appForm.email.$dirty && appForm.email.$error.required">必須項目: メールアドレスを入力しでください。</span>
      <span class="text-danger" ng-show="appForm.email.$dirty && appForm.email.$error.email">メールフォーマットエラー: 正しいメールアドレスフォーマットを入力してください。</span>
    </div>
    <div class="text-center">
      <button ng-disabled="appForm.$invalid" ng-click="save()" class="btn btn-primary">登録
      </button>
    </div>
  </div>
</form>
<div class="well" ng-show="master">
  <strong>入力内容</strong><br />
  {{master | json}}
</div>
var demoApp = angular.module('demoApp', []);
demoApp.controller("formCtrl", function($scope) {
  $scope.user = null;
  $scope.master = null;
  $scope.save = function(){
    $scope.master = angular.copy($scope.user);
  }
});

(10)ng-optionsを使ってSelectメニューを作成

1)オブジェクト全体を値として取得
 

選択した値: {{selectCity1}}

2)オブジェクト内の指定した属性を取得

選択した値: {{selectCity2}}

3)グループ化してオプションを表示

選択した値: {{selectCity3}}


1)オブジェクト全体を値として取得
 
<select ng-model="selectCity1" ng-options="city.name for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity1}}

2)オブジェクト内の指定した属性を取得
<select ng-model="selectCity2" ng-options="city.id as city.name for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity2}}

3)グループ化してオプションを表示
<select ng-model="selectCity3" ng-options="city.id as city.name group by city.pref for city in citys">
  <option value="">市区町村を選択してください</option>
</select>

  選択した値: {{selectCity3}}

var demoApp = angular.module('demoApp', []);
demoApp.controller("formCtrl", function($scope) {
  $scope.citys = [
    { id: "0101", name: "港区", pref: "東京都"},
    { id: "0102", name: "渋谷区", pref: "東京都"},
    { id: "0103", name: "新宿区", pref: "東京都"},
    { id: "0201", name: "横浜市", pref: "神奈川県"},
    { id: "0202", name: "川崎市", pref: "神奈川県"}
  ];
});

(10.1)ng-repeatを使ってラジオボタンを作成

1)$parent属性を使用する方法
 

選択した値: {{selectedPref}}
 
2)ラジオボタンのng-change属性の使用例
 

選択した値: {{data.selectedPref}}

  • {{item}}

1)$parent属性を使用する方法
 <br />
  <div class="radio" ng-repeat="item in prefs">
    <label>
      <input type="radio" ng-model="$parent.selectedPref"
           value="{{item.id}}">{{item.name}}
    </label>
  </div>
  選択した値: {{selectedPref}}<br />
2)ラジオボタンのng-change属性の使用例<br />
 <br />
  <div class="radio" ng-repeat="item in prefs">
    <label>
      <input type="radio" ng-model="data.selectedPref"
           value="{{item.id}}"
           ng-change="data.changePref($index)">{{item.name}}
    </label>
  </div>
  選択した値: {{data.selectedPref}}
  <ul>
    <li ng-repeat="item in data.pref">{{item}}</li>
  </ul>

var demoApp = angular.module('demoApp', []);
demoApp.controller("formCtrl", function($scope) {
  $scope.prefs = [
    { id: "01", name: "東京都"},
    { id: "02", name: "神奈川県"}
  ];
  var prefsDetail = [
    { id: "01", 
      name: "東京都",
      kencho: "新宿区", 
      jinko: "・・・・"},
    { id: "02", 
      name: "神奈川県",
      kencho: "横浜市", 
      jinko: "・・・・"}
  ];
  $scope.selectedPref="01";

  $scope.data = {};
  $scope.data.selectedPref="01";
  $scope.data.pref=prefsDetail[0];
  $scope.data.changePref = function(index) {
    $scope.data.pref=prefsDetail[index];
  };
})

(11)ビルトインのフィルターの使い方

1)降順のorderBy、limitToで表示個数、numberで小数点桁数
 

日時 国語 算数 理科 平均
{{myScore.day}} {{myScore.jpn}} {{myScore.math}} {{myScore.sci}} {{(myScore.jpn + myScore.math + myScore.sci)/3 | number:1}}

2)複数項目でorderBy、属性の値でfilter
 
フィルター:

商品名 分類 価格
{{item.name}} {{item.grp}} {{item.price | number:0}}円


1)降順のorderBy、limitToで表示個数、numberで小数点桁数
 
<table class="table">
  <thead>
    <tr><th>日時</th><th>国語</th><th>算数</th><th>理科</th><th>平均</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | orderBy: '-day' |limitTo:3">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{(myScore.jpn + myScore.math + myScore.sci)/3 | number:1}}</td>
    </tr>
  </tbody>
</table>
  
2)複数項目でorderBy、属性の値でfilter
  フィルター:<input ng-model="query" type="text" placeholder="商品名で検索" autofocus> <table class="table"> <thead> <tr><th>商品名</th><th>分類</th><th>価格</th></tr> </thead> <tbody> <tr ng-repeat="item in products |filter:{chk: 'true',name: query} | orderBy:['grp','price']"> <td>{{item.name}}</td> <td>{{item.grp}}</td> <td>{{item.price | number:0}}円</td> </tr> </tbody> </table>
var demoApp = angular.module('demoApp', []);
demoApp.controller("filterCtrl", function($scope) {
  $scope.myScores = [
    { day: "2014/01/08", jpn: 74 ,math: 52, sci: 68 },
    { day: "2014/03/08", jpn: 54 ,math: 63, sci: 38 },
    { day: "2014/04/08", jpn: 36 ,math: 91, sci: 78 },
    { day: "2014/02/08", jpn: 74 ,math: 52, sci: 48 },
    { day: "2014/11/08", jpn: 48 ,math: 57, sci: 28 },
    { day: "2014/06/08", jpn: 94 ,math: 52, sci: 78 }
  ];
  $scope.products = [
    {name: "デジタルカメラA",grp:"カメラ",price: 8500,chk:true},
    {name: "デジタルカメラD",grp:"カメラ",price: 3500,chk:false},
    {name: "パソコンB",grp:"パソコン",price: 15900,chk:true},
    {name: "デジタルカメラB",grp:"カメラ",price: 9800,chk:true},
    {name: "パソコンD",grp:"パソコン",price: 5900,chk:false},
    {name: "パソコンC",grp:"パソコン",price: 25900,chk:true},
    {name: "パソコンA",grp:"パソコン",price: 14900,chk:true}
  ];
});

(12)ビルトインのフィルターで関数を使用

1)filterで関数を使用
 

日時 国語 算数 理科 平均
{{myScore.day}} {{myScore.jpn}} {{myScore.math}} {{myScore.sci}} {{myScore.jpn + myScore.math + myScore.sci}}

2)orderByで式を指定して、項目クリックでソート
 
[ 初期状態に戻す ]

日時 国語 算数 理科 合計
{{myScore.day}} {{myScore.jpn}} {{myScore.math}} {{myScore.sci}} {{myScore.jpn + myScore.math + myScore.sci}}

3)orderByで関数を使用
 

商品名 価格 在庫数
{{item.name}} {{item.price | number:0}}円 {{item.stock}}

1)filterで関数を使用
 
<table class="table">
  <thead>
    <tr><th>日時</th><th>国語</th><th>算数</th><th>理科</th><th>合計</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | filter:selectPass">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{myScore.jpn + myScore.math + myScore.sci}}</td>
    </tr>
  </tbody>
</table>
  <br />
2)orderByで式を指定して、項目クリックでソート<br />
 
[ <a href="" ng-click="sortClm=''">初期状態に戻す</a> ]
<table class="table">
  <thead>
    <tr>
      <th><a href="" ng-click="sortClm = 'day'; reverse=!reverse">日時</a></th>
      <th><a href="" ng-click="sortClm = 'jpn'; reverse=!reverse">国語</a></th>
      <th><a href="" ng-click="sortClm = 'math'; reverse=!reverse">算数</a></th>
      <th><a href="" ng-click="sortClm = 'sci'; reverse=!reverse">理科</a></th>
      <th>合計</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="myScore in myScores | orderBy:sortClm:reverse">
      <td>{{myScore.day}}</td>
      <td>{{myScore.jpn}}</td>
      <td>{{myScore.math}}</td>
      <td>{{myScore.sci}}</td>
      <td>{{myScore.jpn + myScore.math + myScore.sci}}</td>
    </tr>
  </tbody>
</table>
  <br />
3)orderByで関数を使用<br />
 
<table class="table">
  <thead>
    <tr><th>商品名</th><th>価格</th><th>在庫数</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | orderBy:customOrder">
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
      <td>{{item.stock}}</td>
    </tr>
  </tbody>
</table>

var demoApp = angular.module('demoApp', []);
demoApp.controller("filterCtrl", function($scope) {
  $scope.myScores = [
    { day: "2014/01/08", jpn: 74 ,math: 52, sci: 68 },
    { day: "2014/03/08", jpn: 54 ,math: 63, sci: 38 },
    { day: "2014/04/08", jpn: 36 ,math: 91, sci: 78 },
    { day: "2014/02/08", jpn: 74 ,math: 52, sci: 48 },
    { day: "2014/11/08", jpn: 48 ,math: 57, sci: 28 },
    { day: "2014/06/08", jpn: 94 ,math: 52, sci: 78 }
  ];
  $scope.products = [
    {name: "デジタルカメラA",price: 8500,stock:3},
    {name: "デジタルカメラD",price: 3500,stock:0},
    {name: "パソコンB",price: 15900,stock:6},
    {name: "デジタルカメラB",price: 9800,stock:3},
    {name: "パソコンD",price: 5900,stock:0},
    {name: "パソコンC",price: 25900,stock:1},
    {name: "パソコンA",price: 14900,stock:10}
  ];
  $scope.selectPass = function (item) {
    if ((item.jpn + item.math + item.sci) > 180 ) {
      return item;
    }
  };
  $scope.customOrder = function (item) {
    return item.stock == 0 ? 99999 : item.price;
  };
})

(13)カスタムフィルター

1)単一の属性値を変換するカスタムフィルター
 

予定 チェック
{{item.action}} {{item.chk | checkmark}}

2)配列データをフィルタリングするカスタムフィルター
 

商品名 分類 価格
{{item.name}} {{item.grp}} {{item.price | number:0}}円

1)単一の属性値を変換するカスタムフィルター
 
<table class="table">
  <thead>
    <tr><th>予定</th><th>チェック</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in todos">
      <td>{{item.action}}</td>
      <td>{{item.chk | checkmark}}</td>
    </tr>
  </tbody>
</table>
  <br />
2)配列データをフィルタリングするカスタムフィルター<br />
 
<select ng-model="selectGrp" ng-options="item.grp as item.grp for item in products | distinct:'grp'">
  <option value="">商品分類を選択してください</option>
</select>
<table class="table">
  <thead>
    <tr><th>商品名</th><th>分類</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products |filter:{grp: selectGrp}">
      <td>{{item.name}}</td>
      <td>{{item.grp}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>

var demoApp = angular.module('demoApp', []);
demoApp.controller("filterCtrl", function($scope) {
  $scope.products = [
    {name: "デジタルカメラA",grp:"カメラ",price: 8500},
    {name: "デジタルカメラD",grp:"カメラ",price: 3500},
    {name: "パソコンB",grp:"パソコン",price: 15900},
    {name: "デジタルカメラB",grp:"カメラ",price: 9800},
    {name: "パソコンD",grp:"パソコン",price: 5900},
    {name: "テレビC",grp:"テレビ",price: 25900},
    {name: "パソコンA",grp:"パソコン",price: 14900}
  ];

  $scope.todos = [
    {action: "データベースのバックアップ",chk:true},
    {action: "AngularJSの勉強",chk:false},
    {action: "ログの確認",chk:true},
    {action: "JavaScriptの勉強",chk:false},
    {action: "レポートを作成",chk:true},
  ];
})
demoApp.filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '';
  };
})

demoApp.filter("distinct", function () {
  return function (data, keyName) {
    var results = [];
    var keys = {};
    for (var i = 0; i < data.length; i++) {
      var val = data[i][keyName];
      if (!keys[val]) {
        keys[val] = true;
        results.push(data[i]);
      }
    }
    return results;
  }
});

(14)AngularJSとBootstrap3を使ってページング

ステップ1)配列データをオフセットと表示個数を指定して表示
 

:
名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}}

ステップ2)配列データをページングで表示
 

名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}}

ステップ3)ページリンクのCSS設定
 

名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}}

ステップ1)配列データをオフセットと表示個数を指定して表示
 
<form class="form-inline">
  <input ng-model="i_offset" type="text" placeholder="オフセット">
  <input ng-model="i_size" type="text" placeholder="表示個数">
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: i_offset | limitTo: i_size">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
</table>
  <br />
ステップ2)配列データをページングで表示<br />
 
<form class="form-inline">
  <div class="form-group">
    <label>1ページの件数:</label>
    <input ng-model="itemsPerPage" type="text">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li>
          <a href="#" ng-click="prevPage()">≪ 前へ</a>
        </li>
        <li ng-repeat="n in range()" ng-click="setPage(n)">
          <a href="#">{{n}}</a>
        </li>
        <li>
          <a href="#" ng-click="nextPage()">次へ ≫</a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>
  <br />
ステップ3)ページリンクのCSS設定<br />
 
<form class="form-inline">
  <div class="form-group">
    <label>1ページの件数:</label>
    <input ng-model="itemsPerPage" type="text">
  </div>
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.address}}</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="4">
      <ul class="pagination">
        <li ng-class="prevPageDisabled()">
          <a href="#" ng-click="prevPage()">≪ 前へ</a>
        </li>
        <li ng-repeat="n in range()"  ng-class="{active: n == currentPage}" ng-click="setPage(n)">
          <a href="#">{{n}}</a>
        </li>
        <li ng-class="nextPageDisabled()">
          <a href="#" ng-click="nextPage()">次へ ≫</a>
        </li>
      </ul>
    </td>
  </tfoot>
</table>

var demoApp = angular.module('demoApp', []);
demoApp.controller("pagingCtrl", function($scope) {
  $scope.itemsPerPage = 3;
  $scope.currentPage = 1;
  $scope.friends = [
    { id: 1, name: "相田",   age: 20 ,address: "東京都品川区"},
    { id: 2, name: "伊藤",   age: 55 ,address: "神奈川県横浜市"},
    { id: 3, name: "上野",   age: 20 ,address: "埼玉県川越市"},
       :
  ];
  $scope.range = function() {
    $scope.maxPage = Math.ceil($scope.friends.length/$scope.itemsPerPage);
    var ret = [];
    for (var i=1; i<=$scope.maxPage; i++) {
      ret.push(i);
    }
    return ret;
  };
  $scope.setPage = function(n) {
    $scope.currentPage = n;
  };
  $scope.prevPage = function() {
    if ($scope.currentPage > 1) {
      $scope.currentPage--;
    }
  };
  $scope.nextPage = function() {
    if ($scope.currentPage < maxPage) {
      $scope.currentPage++;
    }
  };
  $scope.prevPageDisabled = function() {
    return $scope.currentPage === 1 ? "disabled" : "";
  };

  $scope.nextPageDisabled = function() {
    return $scope.currentPage === $scope.maxPage ? "disabled" : "";
  };
})
demoApp.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start);
    return input.slice(start);
  };
})

(15)スクリプト内でフィルターを使用、既存のフィルターを拡張

1)コントローラ内でフィルターを使用

①filterFilterの書式を使用
 

商品番号 商品名 価格
{{item.no}} {{item.name}} {{item.price | number:0}}円

②$filterを使用
 

商品番号 商品名 価格
{{item.no}} {{item.name}} {{item.price | number:0}}円

2)既存のフィルターを拡張
 



商品番号 商品名 価格
{{item.no}} {{item.name}} {{item.price | number:0}}円

1)コントローラ内でフィルターを使用<br />
<br />
①filterFilterの書式を使用<br />
 
<table class="table">
  <thead>
    <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in trueProducts">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table><br />
②$filterを使用<br />
 
<table class="table">
  <thead>
    <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pcProducts">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>
  <br />
2)既存のフィルターを拡張<br />
 
<form class="form-inline">
  <input ng-model="i_offset" type="text" placeholder="オフセット">
  <input ng-model="i_size" type="text" placeholder="表示個数">
</form>
<table class="table table-striped">
  <thead>
    <tr>
      <tr><th>商品番号</th><th>商品名</th><th>価格</th></tr>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in products | range:i_offset:i_size">
      <td>{{item.no}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price | number:0}}円</td>
    </tr>
  </tbody>
</table>

var demoApp = angular.module('demoApp', []);
demoApp.controller("filterCtrl", function($scope,filterFilter,$filter) {
  $scope.products = [
    {no: 1,name: "デジタルカメラA",price: 8500,chk:true},
    {no: 2,name: "デジタルカメラD",price: 3500,chk:false},
    {no: 3,name: "パソコンB",price: 15900,chk:true},
    {no: 4,name: "デジタルカメラB",price: 9800,chk:true},
    {no: 5,name: "パソコンD",price: 5900,chk:false},
    {no: 6,name: "パソコンC",price: 25900,chk:true},
    {no: 7,name: "パソコンA",price: 14900,chk:true}
  ];

  $scope.trueProducts = filterFilter($scope.products, {chk: 'true'});
  $scope.pcProducts = $filter("filter")($scope.products, {name: 'パソコン'});
})

demoApp.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start);
    return input.slice(start);
  };
})

demoApp.filter('range', function($filter) {
  return function (input, offset, count) {
    var offsetInput = $filter("offset")(input, offset);
    return $filter("limitTo")(offsetInput, count);
  }
})

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です