AngularJS1.5に再挑戦 その15 Angular Columns

概要

AngularJS1.5に再挑戦 その15 Angular Columns

参考動画・参考サイト

Coding for Entrepreneurs

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に入れ込まずに反映されてるぽい。