<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により、disableTagButtontrueの場合のみボタンにクラスが追加され、disableTagButtonfalseの場合は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そうでない場合は削除します。
のcssクラス名
ng-classがダッシュで区切られている場合は、文字列として定義する必要があります。それ.. ng-class="'my-class' : ..以外の場合は、文字列として定義することも、そうでない場合もあります。.. ng-class="myClass : ..
<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>
<style>
.myClass {
visibility: hidden
}
</style>
式は、キーがCSSスタイル名であり、値がそれらのCSSキーに対応する値であるオブジェクトに[ngスタイルの][2]評価を渡します。
例：
.. ng-style="{_key_ : _value_}" ...=>_key_は、_value_プロパティ値を設定する際のcssプロパティです。例=>.. ng-style="{color : 'red'}" ...
background-colorそのようなものを使用している場合、それはオブジェクトの有効なキーではないので、.. ng-style="{'background-color' : 'red'}" ...ng-classと同じように引用符で囲む必要があります。
<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'}"
はsomeVartrueと評価され、次に可視性はに設定され、visibleその他の可視性はに設定されhiddenます。
disableTagButtonにfalse自動的にクラスmyClass、ボタンから削除されますvisibility: hidden削除されます
を使用できますng-style。簡単な例：
<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
実行時に、スタイルが変更されるとisMenuOpen変更されます。
isMenuOpenである真の、あなたが持っているでしょうstyle="visibility: visible"。isMenuOpenがfalseの場合、がありますstyle="visibility: hidden"。<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
ng-style="{visibility: isMenuOpen?'visible':'hidden'}" 引用符は複合語でのみ役立ちます。それ以外の場合は、引用符なしで構成されたcssプロパティにCAML構文を使用できます。
可視性を非表示または可視（ただし折りたたみではない）に設定する単純なディレクティブは次のとおりです。
.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>
ng-visibleディレクティブを追加するだけです。
または、ブートストラップを使用している場合は、invisibleクラスを使用します
ng-class='{"invisible": !controller.isSending}'
ngを使用しない理由-タグがhtmlページに表示されない場合。私はあなたがこれを使うと思います：
<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
https://docs.angularjs.org/api/ng/directive/ngを参照してください 。.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;
}