カテゴリー別アーカイブ: コーディング

Bootstrap3のtabを使って目次、表示の切り替え

Bootstrap3のタブを使って目次のリンク、目次のリンククリックで内容表示の切り替えを行うサンプルを作成しています。
　
なお、ここではBootstrapのv3.3.7を使用して動作確認しています。
続きを読む →

関連記事の目次

AngularJSでJavaScript、CSSを含むHTMLデータをバインドして表示

AngularJSでJavaScript、CSSを含むHTMLデータをバインドして表示する方法を確認しました。
　
デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

$httpサービスのinterceptorの概要
AngularJSでは、デフォルトで$sce（strict contextual escaping）サービスが有効になっていて、スクリプト内で定義した変数の値をバンディングでしてビューに表示する際にHTMLタグをエスケープしたり、JavaScriptやCSSの設定など危険なデータをサニタイズしてくれます。
　
下記スクリプト内のデータは、bタグ、CSS、JavaScriptの設定がしてありますが、HTMLビュー内で{{htmlData}}を使ってバインドするとHTML、CSS、JavaScriptコードがエスケープ、サニタイズされ文字列としてそのまま表示されます。
　
（スクリプト）
$scope.htmlData = “<b style=’color: red;’ onmouseover=alert(‘Alert!’)>mouseover</b>”;
　
（HTMLビュー）
{{htmlData}}
→<b style=’color: red;’ onmouseover=alert(‘Alert!’)>mouseover</b>

$sanitizeサービスとng-bind-htmlディレクティブでHTMLとして表示
$sanitizeサービスを有効にし、ng-bind-htmlディレクティブを使ってバインドするとHTMLタグを表示する事が出来ます。
　
一方、インラインのJavaScriptコードやスタイル属性などscriptやcss要素は除去されます。
　
（HTMLビュー）
<span ng-bind-html=”htmlData”></span>
→mouseover
　
※$sanitizeサービスを有効にするには？
　
①angular-sanitize.min.jsを入手
　
AngularJS本体には含まれていないので、別途angular-sanitize.min.jsを入手し、インクルードします。
<script src=”js/angular-sanitize.min.js”></script>
　
②依存するモジュールに”ngSanitize”を指定
　
var myApp = angular.module(‘myApp’, [“ngSanitize”]);

$sceのtrustAsHtmlを使って、CSS、JavaScriptを実行
$sceサービスのtrustAsHtmlメソッドを使ってJavaScriptやCSS要素などをサニタイズせずにHTMLデータを表示、実行する事が出来ます。
　
例）
（HTMLビュー）
<span ng-bind-html=”trustedData”></span>
　
（スクリプト）

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller("myCtrl", function ($scope,$sce) {
  $scope.htmlData = "<b style='color: red;' onmouseover=alert('Alert!')>mouseover</b>";
  $scope.trustedData = $sce.trustAsHtml($scope.htmlData);
});

　
デモとコードサンプルはこちら。

関連記事の目次

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

AngularJSとBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。

デモとコードサンプルはこちら。
　
Bootstrap3によるCSS設定、AngularJSのビルトインフィルター、カスタムフィルターなど様々な機能を使用していてコードが少し長くなっているので、３段階のステップに分けて作成しています。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

配列データをオフセットと表示個数を指定して表示
一覧情報をページ化して表示するには、オフセット（配列内のどのデータから表示するか）と表示個数を制御する必要があります。
　
まず、AngularJSのフィルターを使って、配列内のデータからオフセットと表示個数を指定して表示するサンプルを作成します。
　
表示個数は、下記のようにビルトインフィルターのlimitToを使って制御する事が出来ます。
　
<tr ng-repeat=”item in friends | offset: i_offset | limitTo: i_size”>
　
オフセットは、下記カスタムフィルターを定義し、入力配列データから指定した個数のデータをsliceで除去しています。このカスタムフィルターを使って、指定したオフセット数以降のデータを表示出来ます。
　

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

配列データをページングで表示
１）ページ数の計算、Bootstrap3のpagination属性を使ってページリンク表示
　
１ページ当りの表示件数を基にページ数を計算し、ページ数分のページリンクをBootstrap3のpagination属性を使って表示します。
　
①ページ数の計算
　
itemsPerPageがページ当りの件数で、配列データ数を割ってページ数を求めます。ページ数分のページ番号をリターンします。

$scope.itemsPerPage = 3;
$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;
};

　
②Bootstrap3のpagination属性を使ってページリンク表示
　
Bootstrap3のページングの機能http://getbootstrap.com/components/#paginationを使ってページリンクを表示します。
　
上記①で定義したrange()関数を使ってページ番号をリターンし、ページ番号のリンクを表示しています。
ng-repeat="n in range()"

<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>

　
２）リンククリック時の動作を定義
　
①現在表示しているページ番号を示す変数の初期値を定義
　
$scope.currentPage = 1;
　
②ページ当りの表示個数
　
<input ng-model="itemsPerPage" type="text">
　
③配列データを表示
　
現在のページ番号$scope.currentPageとページ当りの表示個数を指定して、指定したページのデータを表示します。上記（１）のサンプルコードを同じ仕組みです。
　
<tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
　
④ページ番号リンククリック時の動作を定義
　
ページ番号をクリックすると$scope.currentPageにそのページ番号を設定します。これで上記③のオフセットが変更され、指定したページのデータを表示出来ます。

（HTML）
<li ng-repeat="n in range()" ng-click="setPage(n)">
  <a href="#">{{n}}</a>
</li>
（スクリプト）
$scope.setPage = function(n) {
  $scope.currentPage = n;
};

　
⑤前後のページへのリンク押下時の動作定義
　
上記④と同様に$scope.currentPageの値を更新します。
（ビュー）

<a href="#" ng-click="prevPage()">≪ 前へ</a>
<a href="#" ng-click="nextPage()">次へ ≫</a>

（スクリプト）
$scope.prevPage = function() {
  if ($scope.currentPage > 1) {
    $scope.currentPage--;
  }
};
$scope.nextPage = function() {
  if ($scope.currentPage < maxPage) {
    $scope.currentPage++;
  }
};

ページリンクのCSS設定
現在表示しているページのページリンクの色を変える、先頭ページを表示している場合は"前へ"のリンクを、最後のページを表示している場合は"次へ"のリンクを無効にするように設定します。
　
AngularJSのng-classを使ってBootstrap3のpagenationのactive、disableを動的に設定して切替えます。
　
①現在表示しているページ番号のリンクをアクティブにする
　
AngularJSのng-classを使って、リンクのページ番号nと現在表示しているページ番号currentPageが等しい場合は、"active"のCSSクラスを動的に追加し、色を変更できます。
　
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
　
②前後のページへのリンクの有効、無効を切替え
　
上記①と同様にng-classを使って、現在のページが先頭または最後かどうかチェックし、マッチした場合は、"disabled"のCSSクラスを動的に追加し、リンクを無効にします。

（HTML）
<ul class="pagination">
  <li ng-class="prevPageDisabled()">
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
　　：
  <li ng-class="nextPageDisabled()">
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>
　
（スクリプト）
$scope.prevPageDisabled = function() {
  return $scope.currentPage === 1 ? "disabled" : "";
};

$scope.nextPageDisabled = function() {
  return $scope.currentPage === $scope.maxPage ? "disabled" : "";
};

関連記事の目次

Proudly powered by WordPress