web-dev-qa-db-ja.com

AngularJsに隠された可視性？

<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>

ng-show適用されたdisplay: noneまたはdisplay: blockプロパティしかし、私はvisibility: hiddenおよびvisibility: visibleプロパティを適用したい。

htmlcssangularjs
71
chirag

次のように ng-class または ng-style ディレクティブを使用できます

ng-class

これは、myclassのみがtrueの場合、ボタンにクラスdisableTagButtonを追加します。disableTagButtonがfalseの場合、myclassはボタンから削除されます

ng-class に渡す式は、スペースで区切られたクラス名、配列、またはブール値へのクラス名のマップを表す文字列です。

1-スペースで区切られたクラス名

.. ng-class="{strike: deleted, bold: important, red: error}"..

2-配列

.. ng-class="[style1, style2, style3]"..

style1、style2、style3はcssクラスです。詳細については、以下のデモを確認してください。

2-式

.. ng-class="'my-class' : someProperty ? true: false"..

somePropertyが存在する場合は.my-classを追加し、そうでない場合は削除します。

ng-classのCSSクラス名がダッシュで区切られている場合は、.. ng-class="'my-class' : ..のような文字列として定義する必要があります。そうでない場合は、.. ng-class="myClass : ..としてではなく、文字列として定義できます

ng-class DEMO

<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>

<style>
   .myClass {
       visibility: hidden
    }
</style>

ng-style

式は[ng-style][2] evalsをキーがCSSスタイル名であり、値がそれらのCSSキーに対応する値であるオブジェクトに渡します。

例：

.. ng-style="{_key_ : _value_}" ... => _key_はcssプロパティであり、_value_はプロパティ値を設定します。例=> .. ng-style="{color : 'red'}" ...

background-colorのようなものを使用する場合、オブジェクトの有効なキーではない場合は、ng-classと同じ.. ng-style="{'background-color' : 'red'}" ...として引用する必要があります。

<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>

あなたのdisableTagButtonは次のようになります

$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.

$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.

したがって、$scope.disableTagButtonを変更することにより、ボタンの可視性を変更できます。

または、インライン式として使用できます。

ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"

はsomeVarがtrueと評価され、次に可視性がvisibleに設定されます。それ以外の可視性はhiddenに設定されます。

69
K.Toress

ng-styleを使用できます。簡単な例：

<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>

実行時に、isMenuOpenが変更されるとスタイルが変更されます。

  • isMenuOpenがtrueの場合、style="visibility: visible"になります。
  • isMenuOpenがfalseの場合、style="visibility: hidden"になります。
47
AlikElzin-kilaka

以下は、可視性を非表示または表示に設定する単純なディレクティブです（ただし、折りたたむことはできません）。

.directive('visible', function() {

    return {
        restrict: 'A',

        link: function(scope, element, attributes) {
            scope.$watch(attributes.visible, function(value){
            element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

使用法：

<button visible='showButton'>Button that can be invisible</button>

angular.module('MyModule', [])

.directive('visible', function() {

  return {
    restrict: 'A',
    
    link: function(scope, element, attributes) {
        scope.$watch(attributes.visible, function(value){
          element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

.controller('MyController', function($scope) {
  $scope.showButton = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  <button visible='showButton'>Button that can be invisible</button>
  <button ng-click='showButton = !showButton'>Hide it or show it</button>
</div>
15
Gruff Bunny

または、ブートストラップを使用している場合は、invisibleクラスを使用します

ng-class='{"invisible": !controller.isSending}'
12
Duane Fields

ngClassまたはngStyleを使用する必要があります。

<button id="tagBtnId" name="TagsFilter" 
    ng-class="{'button-hidden':!disableTagButton}">Tags</button>

そして、これはCSS：

.button-hidden{
   visibility: hidden;
}
2
Michael

https://docs.angularjs.org/api/ng/directive/ngShow を参照してください。ng-hideのオーバーライドに関するセクション

必要なのは、クラスhg-hide-animateを要素に割り当てることです

/* style your element(s) at least for selector.ng-hide */
/* in this case your selector is #tagBtnId */
#tagBtnId.ng-hide {
  /*visibility:hidden;*/
  opacity: 0;
  transition: opacity 1s ease-in;
}
#tagBtnId {
  /*visibility:initial;*/
  opacity: 1;
  transition: opacity 1s ease-out;
}

(function() {
  angular.module('app', []).controller('controller', Controller);
  /* @ngInject */
  function Controller($s) {var THIS = this;THIS.disableTagButton = false;}
  Controller.$inject = ['$scope'];
})();
/* style your element(s) at least for selector.ng-hide */
/* in this case your selector is #tagBtnId */
#tagBtnId.ng-hide {
  /*visibility:hidden;*/
  opacity: 0;
  transition: opacity 1s ease-in;
}
#tagBtnId {
  /*visibility:initial;*/
  opacity: 1;
  transition: opacity 1s ease-out;
}
<div ng-app='app' ng-controller="controller as viewmodel">
  <label>disabled</label>
  <input type="checkbox" ng-model="viewmodel.disableTagButton" />

  <!-- assign class "ng-hide-animate" -->
  <button 
    class="ng-hide-animate"
    id="tagBtnId" name="TagsFilter" ng-hide="viewmodel.disableTagButton">
    Tags
  </button>


  <pre inspect>viewmodel={{viewmodel | json}}</pre>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
1
user2173403

ng-ifを使用しない理由は、タグがHTMLページでレンダリングされないためです。これを使用すると思います：

<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
0
Sandeep