m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

javascriptのバインディングフレームワーク「angularjs」の学習2(ng-repeat、ng-click)

更新は少しずつ

いろいろと学習することも別にあるので少しずつ学習する。
一気にやっても覚えられないので…
今回は繰り返しだけ

繰り返し

ng-repeatでバインドした配列形式のデータをバインド可能
<!DOCType html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Sample04</title>
    </head>
    <body ng-app="sample04">
        <div ng-controller="controller04">
            
            <div ng-repeat="data in lists">
                <p>名前:{{data}}</p>
            </div>
            <hr />
            
            <div ng-repeat="item in items">
                <p>名前:{{item.name}}</p>
                <p>件数:{{item.count}}</p>
            </div>
            <hr />
            
        </div>
        
        <script src="./js/angular.min.js" type="text/javascript"></script>
        <script src="./js/app04.js"></script>
    </body>
</html>

$scopeに配列を設定すると"ng-repeat"でバインドする

/**
 * リスト表示
 */
'use strict';
(function() {
    // ng-appのidと紐付け
    var app = angular.module('sample04', []);
    
    // コントローラーのバインド
    app.controller('controller04', ['$scope', function ($scope) {
        
        // 初期化
        
        // 配列
        $scope.lists = ["aaaa", "bbb", "ccc"];
        
        // オブジェクト型
        $scope.items = [{
            name: "サンプル1",
            count: 10
        },{
            name: "サンプル2",
            count: 50
        },{
            name: "サンプル3",
            count: 150
        }
        ];
        
    }]);
    
})();

結果
f:id:m_shige1979:20131205201034j:plain
配列をそのまま設定することも、jsonというかオブジェクトの形式でも設定して対応できる

バインド変数を変更すれば表示も変わる
<!DOCType html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Sample04</title>
    </head>
    <body ng-app="sample04">
        <div ng-controller="controller04">
            
            <input type="button" value="表示1" ng-click="display(0)" />
            <input type="button" value="表示2" ng-click="display(1)" />
            
            <div ng-repeat="data in lists">
                <p>名前:{{data}}</p>
            </div>
            <hr />
            
            <div ng-repeat="item in items">
                <p>名前:{{item.name}}</p>
                <p>件数:{{item.count}}</p>
            </div>
            <hr />
            
        </div>
        
        <script src="./js/angular.min.js" type="text/javascript"></script>
        <script src="./js/app04.js"></script>
    </body>
</html>

設定値を用意して、クリックイベント単位に切り替えるようにする

/**
 * リスト表示
 */
'use strict';
(function() {
    // ng-appのidと紐付け
    var app = angular.module('sample04', []);
    
    // コントローラーのバインド
    app.controller('controller04', ['$scope', function ($scope) {
        
        // 初期化
        var data = [{
                aaa: ["aaa", "bbb", "ccc"],
                bbb: [{
                    name: "サンプル1",
                    count: 10
                },{
                    name: "サンプル2",
                    count: 50
                },{
                    name: "サンプル3",
                    count: 150
                }
            ]
        },{
                aaa: ["xxx", "yyy", "zzz"],
                bbb: [{
                    name: "サンプルA",
                    count: 5000
                },{
                    name: "サンプルB",
                    count: 1200
                },{
                    name: "サンプルC",
                    count: 9999
                }
            ]
        }
        ];
        
        // 初期値
        $scope.lists = data[0].aaa;
        $scope.items = data[0].bbb;
        
        // クリック押下時の設定
        $scope.display = function(idx){
            $scope.lists = data[idx].aaa;
            $scope.items = data[idx].bbb;
        };
        
    }]);
    
})();

表示1ボタン押下
f:id:m_shige1979:20131205203121j:plain

表示2ボタン押下
f:id:m_shige1979:20131205203130j:plain

まとめ

JQueryとは異なり、値を変更することで表示を簡単に変更できる。
$scope.変数に関数を設定することでng-clickで呼び出す関数を使用できる。
今回は静的なデータを使用したが、ajaxなどでデータを取得することで可変する値を切り替えることができるかも?