<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>
ng-show適用されたdisplay: none
またはdisplay: block
プロパティしかし、私はvisibility: hidden
およびvisibility: visible
プロパティを適用したい。
次のように ng-class
または ng-style
ディレクティブを使用できます
これは、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 : ..
としてではなく、文字列として定義できます
<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>
<style>
.myClass {
visibility: hidden
}
</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
に設定されます。
ng-style
を使用できます。簡単な例:
<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
実行時に、isMenuOpen
が変更されるとスタイルが変更されます。
isMenuOpen
がtrueの場合、style="visibility: visible"
になります。isMenuOpen
がfalseの場合、style="visibility: hidden"
になります。以下は、可視性を非表示または表示に設定する単純なディレクティブです(ただし、折りたたむことはできません)。
.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>
または、ブートストラップを使用している場合は、invisible
クラスを使用します
ng-class='{"invisible": !controller.isSending}'
ngClassまたはngStyleを使用する必要があります。
<button id="tagBtnId" name="TagsFilter"
ng-class="{'button-hidden':!disableTagButton}">Tags</button>
そして、これはCSS:
.button-hidden{
visibility: hidden;
}
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>
ng-ifを使用しない理由は、タグがHTMLページでレンダリングされないためです。これを使用すると思います:
<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>