angularjsのng-show、ng-hideで表示切り替え
表示、非表示の設定するディレクティブ
ng-showはtrueの場合に表示を設定し、ng-hideはtrueの場合に非表示を設定する
実験用の環境
onsen-uiのサンプルファイル「www」を流用
基本
index.html
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>My App</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/app.css"/> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <script> ons.ready(function() { }); </script> <style> .item { padding: 10px; line-height: 1; } .item-thum { background-color: #ccc; width: 50px; height: 50px; border-radius: 4px; } .item-title { font-size: 15px; font-weight: 500; } .item-desc { font-size: 14px; color: #666; line-height: 1.3; margin: 4px 0 0 0; padding: 0 30px 0 0; } .item-label { font-size: 12px; color: #999; float: right; } </style> </head> <body ng-controller="AppController"> <ons-navigator> <ons-page> <ons-toolbar> <div class="center">サンプルデータ</div> </ons-toolbar> <ons-list ng-controller="MasterController"> <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-show="item.disp1" ng-hide="item.hide1"> <ons-row > <ons-col width="60px"> <div class="item-thum"></div> </ons-col> <ons-col> <header> <span class="item-title">{{item.title}}</span> <span class="item-label">{{item.label}}</span> </header> <p class="item-desc">{{item.desc}}</p> </ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </ons-navigator> </body> </html>
app.js
(function(){ 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope, $data) { }); module.controller('MasterController', function($scope, $data) { $scope.items = $data.items; }); module.factory('$data', function() { var data = {}; data.items = [ { title: 'testtitle1', label: 'label1', desc: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', disp1: true, hide1: false }, { title: 'testtitle2', label: 'label2', desc: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', disp1: true, hide1: false }, { title: 'testtitle3', label: 'label3', desc: 'cccccccccccccccccccccccccccccccccccccc', disp1: true, hide1: false }, { title: 'testtitle4', label: 'label4', desc: 'dddddddddddddddddddddddddddddddddddddd', disp1: true, hide1: false }, { title: 'testtitle5', label: 'label5', desc: 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', disp1: true, hide1: false }, { title: 'testtitle6', label: 'label6', desc: 'fffffffffffffffffffffffffffffffffffff', disp1: true, hide1: false } ]; return data; }); })();
↓
対象にしたデータは全部出ます
ng-showを変更
app.js
(function(){ 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope, $data) { }); module.controller('MasterController', function($scope, $data) { $scope.items = $data.items; }); module.factory('$data', function() { var data = {}; data.items = [ { title: 'testtitle1', label: 'label1', desc: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', disp1: false, hide1: false }, { title: 'testtitle2', label: 'label2', desc: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', disp1: false, hide1: false }, { title: 'testtitle3', label: 'label3', desc: 'cccccccccccccccccccccccccccccccccccccc', disp1: false, hide1: false }, { title: 'testtitle4', label: 'label4', desc: 'dddddddddddddddddddddddddddddddddddddd', disp1: true, hide1: false }, { title: 'testtitle5', label: 'label5', desc: 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', disp1: true, hide1: false }, { title: 'testtitle6', label: 'label6', desc: 'fffffffffffffffffffffffffffffffffffff', disp1: true, hide1: false } ]; return data; }); })();
※disp1を3件ほどfalseに変更
↓
※falseにしたデータは消えます
ng-hideを変更
app.js
(function(){ 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope, $data) { }); module.controller('MasterController', function($scope, $data) { $scope.items = $data.items; }); module.factory('$data', function() { var data = {}; data.items = [ { title: 'testtitle1', label: 'label1', desc: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', disp1: true, hide1: false }, { title: 'testtitle2', label: 'label2', desc: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', disp1: true, hide1: false }, { title: 'testtitle3', label: 'label3', desc: 'cccccccccccccccccccccccccccccccccccccc', disp1: true, hide1: false }, { title: 'testtitle4', label: 'label4', desc: 'dddddddddddddddddddddddddddddddddddddd', disp1: true, hide1: true }, { title: 'testtitle5', label: 'label5', desc: 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', disp1: true, hide1: true }, { title: 'testtitle6', label: 'label6', desc: 'fffffffffffffffffffffffffffffffffffff', disp1: true, hide1: true } ]; return data; }); })();
↓
注意
表示されないだけでHTMLとしては生成されています
今回はサンプルなので表示の切り替えに使用しましたが、実際は隠し項目の表示切り替えに使うもとと思われます。
定義
<ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-show="item.disp1" ng-hide="item.hide1">
表示制御を行うタグに定義するバインドした値のtrue/falseで表示の制御を行っているようです。
両方trueの場合はng-hideで隠すようになるようですね
表示ではなく、消したい場合は?
ng-ifディレクティブを使用するらしい
index.html
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>My App</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/app.css"/> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <script> ons.ready(function() { }); </script> <style> .item { padding: 10px; line-height: 1; } .item-thum { background-color: #ccc; width: 50px; height: 50px; border-radius: 4px; } .item-title { font-size: 15px; font-weight: 500; } .item-desc { font-size: 14px; color: #666; line-height: 1.3; margin: 4px 0 0 0; padding: 0 30px 0 0; } .item-label { font-size: 12px; color: #999; float: right; } </style> </head> <body ng-controller="AppController"> <ons-navigator> <ons-page> <ons-toolbar> <div class="center">サンプルデータ</div> </ons-toolbar> <ons-list ng-controller="MasterController"> <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-if="item.disp1"> <ons-row > <ons-col width="60px"> <div class="item-thum"></div> </ons-col> <ons-col> <header> <span class="item-title">{{item.title}}</span> <span class="item-label">{{item.label}}</span> </header> <p class="item-desc">{{item.desc}}</p> </ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </ons-navigator> </body> </html>
app.js
(function(){ 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope, $data) { }); module.controller('MasterController', function($scope, $data) { $scope.items = $data.items; }); module.factory('$data', function() { var data = {}; data.items = [ { title: 'testtitle1', label: 'label1', desc: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', disp1: false, hide1: false }, { title: 'testtitle2', label: 'label2', desc: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', disp1: false, hide1: false }, { title: 'testtitle3', label: 'label3', desc: 'cccccccccccccccccccccccccccccccccccccc', disp1: false, hide1: false }, { title: 'testtitle4', label: 'label4', desc: 'dddddddddddddddddddddddddddddddddddddd', disp1: true, hide1: false }, { title: 'testtitle5', label: 'label5', desc: 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', disp1: true, hide1: false }, { title: 'testtitle6', label: 'label6', desc: 'fffffffffffffffffffffffffffffffffffff', disp1: true, hide1: false } ]; return data; }); })();
所感
うーん、結構覚えることが多くて大変かも。
JQueryの場合はネットで検索でどうとでもなったけどangularjsの場合は微妙になんかこれじゃない感があるので
慣れが必要
ん?以前にも同じようなこと書いたわ(;´д`)トホホ…