AngularJS1.5に再挑戦 その15 Angular Columns
概要
AngularJS1.5に再挑戦 その15 Angular Columns
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
Angular Columns
- angular columsを作るには、angularのquery機能などを使う。
'use strict'; angular.module('blogList'). component('blogList', { templateUrl: '/templates/blog-list.html', controller: function(Post, $location, $routeParams, $rootScope, $scope){ $scope.goToItem = function(post){ $rootScope.$apply(function(){ $location.path("/blog/" + post.id) }) }; Post.query(function(data){ // console.log(data) $scope.items = data $scope.colItems = chunkArrayInGroups(data, 3) }, function(errorData){ }); function chunkArrayInGroups(array, unit){ var results = [], length = Math.ceil(array.length / unit); for (var i = 0; i < length; i++){ results.push(array.slice(i * unit, (i + 1) * unit)); } return results; } } });
- setupCol, changeColを作成する。
// viewから受け取った数字によって、sm-col- の数字を変える。 // 最終的には受け取った数字をsetupColに渡しており、それによりcssClassが変わり、view全体のcolが変わるという仕組みになっている。 $scope.changeCols = function(number){ if (angular.isNumber(number)){ $scope.numCols = number } else { $scope.numCols = 2 } setupCol($scope.items, $scope.numCols) } // setupCol 数値を受け取りそれに応じて、cssClassを設定するのが大きな目的の関数 // 他の関数に組み込んで使うことにより、動的なcolumの変更が可能になる。 function setupCol(data, number){ if (angular.isNumber(number)){ $scope.numCols = number } else { $scope.numCols = 2 } $scope.cssClass = 'col-sm-' + (12/$scope.numCols) $scope.items = data $scope.colItems = chunkArrayInGroups(data, $scope.numCols) }
- $scope.cssClassで受け取る、cssClassをそのままtemplateに代入する。
div class="row" ng-repeat='item in colItems'> <div class="{{ cssClass }}" ng-repeat='post in items'> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>{{ post.title }}</h3> <p>{{ post.text }} {{ post.publishDate }}</p> <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p> </div> </div> </div> </div>
- clickされた時に、changeColsを呼び出すng-clickタグをセットする。この時のポイントは、changeColsには数値を引数として渡すこと。
<h1>Blog List <small><a href='#' ng-click='changeCols(2)'>Change</a></h1>
- blog-list.htmlに、フィルターをつけてみる。
<h1>Blog List <small><a href='#' ng-click='changeCols(2)'>Change</a></h1> <div class='col-sm-6'> <input type='text' ng-model='query' class='form-control' placeholder='こちらに入力してください'> </div> ... <div class="row" ng-repeat='item in colItems'> <div class="{{ cssClass }}" ng-repeat='post in items | filter: query'> <div class="thumbnail"> <img src="..." alt="..."> ...
- filterで検索した値をwatchするためにconsole logに表示させる。そして、filterに値が、ある場合と無い場合、さらに検索結果がある場合と無い場合で、場合わけをする。
$scope.loadingQuery = false $scope.$watch(function(){ console.log($scope.query) if($scope.query){ $scope.loadingQuery = true $scope.cssClass = 'col-sm-12' } else{ if ($scope.loadingQuery){ setupCol($scope.items, 2) $scope.loadingQuery = false } } })
- watchは、組み込みなのかな。htmlに入れ込まずに反映されてるぽい。