m_shige1979のときどきITブログ

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

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

https://github.com/mshige1979

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;
  });
})();

f:id:m_shige1979:20141120222941p:plain
対象にしたデータは全部出ます

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に変更

f:id:m_shige1979:20141120223233p:plain
※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;
  });
})();

f:id:m_shige1979:20141120223730p:plain

注意

表示されないだけで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の場合は微妙になんかこれじゃない感があるので
慣れが必要

ん?以前にも同じようなこと書いたわ(;´д`)トホホ…