<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>
ng-show stosowane display: none
lub display: block
właściwość Ale chcę zastosować visibility: hidden
i visibility: visible
właściwości.
Odpowiedzi:
Możesz użyć dyrektyw ng-class
lub, ng-style
jak poniżej
doda to klasę myclass
do przycisku tylko wtedy, gdy disableTagButton
jest prawdziwe, jeśli disableTagButton
jest fałszywe myclass
, usunie z przycisku
wyrażenie do ng-class
może być łańcuchem reprezentującym nazwy klas rozdzielane spacjami, tablicą lub mapą nazw klas na wartości logiczne.
1 - nazwy klas rozdzielane spacjami
.. ng-class="{strike: deleted, bold: important, red: error}"..
2 - tablica
.. ng-class="[style1, style2, style3]"..
style1, style2 i style3 to klasy css, sprawdź poniższe demo, aby uzyskać więcej informacji.
2 - wyrażenie
.. ng-class="'my-class' : someProperty ? true: false"..
jeśli someProperty
istnieje, dodaj .my-class
else usuń go.
Jeśli nazwa klasy css
ng-class
jest oddzielona myślnikami, musisz zdefiniować ją jako ciąg znaków, tak jak.. ng-class="'my-class' : ..
inaczej możesz zdefiniować ją jako ciąg lub nie jako.. ng-class="myClass : ..
<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>
<style>
.myClass {
visibility: hidden
}
</style>
Wyrażenie przekazuje wartości evals w [
stylu ][2]
ng do obiektu, którego klucze są nazwami stylów CSS, a wartości odpowiadają wartościom tych kluczy CSS.
DAWNY:
.. ng-style="{_key_ : _value_}" ...
=> _key_
jest właściwością css podczas _value_
ustawiania wartości właściwości. Ex =>.. ng-style="{color : 'red'}" ...
Jeśli używasz czegoś podobnego,
background-color
to nie jest to prawidłowy klucz obiektu, to musi być cytowany tak.. ng-style="{'background-color' : 'red'}" ...
samo jak ng-class.
<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>
wtedy disableTagButton
powinno być jak
$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.
$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.
więc możesz zmienić widoczność przycisku, zmieniając $scope.disableTagButton
.
lub możesz użyć go jako wyrażenia wbudowanego,
ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"
jest someVar
szacowana na true, a następnie widoczność ustawiona na visible
Else visibility ustawiona na hidden
.
disableTagButton
na false
to automatycznie klasa myClass
usunie się z przycisku, a następnie visibility: hidden
usunie
Możesz użyć ng-style
. Prosty przykład:
<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
W czasie wykonywania styl zmienia się wraz ze isMenuOpen
zmianami.
isMenuOpen
to prawda , będziesz mieć style="visibility: visible"
.isMenuOpen
jest fałszywe , będziesz mieć style="visibility: hidden"
.<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
ng-style="{visibility: isMenuOpen?'visible':'hidden'}"
Cytaty są przydatne tylko w przypadku słów złożonych. W przeciwnym razie możesz użyć składni CAML dla właściwości css utworzonych bez cudzysłowów.
Oto prosta dyrektywa, która ustawia widoczność na ukrytą lub widoczną (ale nie zwijaną):
.directive('visible', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.visible, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
Stosowanie:
<button visible='showButton'>Button that can be invisible</button>
ng-visible
dyrektywę.
Lub jeśli używasz bootstrap, użyj invisible
class
ng-class='{"invisible": !controller.isSending}'
dlaczego nie używasz ng-if tag nie jest renderowany na Twojej stronie HTML. Myślę, że używasz tego:
<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
zobacz https://docs.angularjs.org/api/ng/directive/ng Pokaż sekcję o zastępowaniu .ng-hide
Wystarczy przypisać klasę hg-hide-animate
do elementu
/* 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;
}