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 } ]; }]); })();
結果
配列をそのまま設定することも、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ボタン押下
表示2ボタン押下
参考
アシアルブログ
http://blog.asial.co.jp/1197
SinDiary
http://d.hatena.ne.jp/sinmetal/20130519/1368970329
present
http://tnakamura.hatenablog.com/entry/20120711/angularjs
なんかちょっと問題ありそう