<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>
ng-show appliqué la propriété display: none
ou display: block
Mais je veux appliquer la propriété visibility: hidden
et visibility: visible
.
Vous pouvez utiliser ng-class
ou ng-style
comme ci-dessous
cela ajoutera la classe myclass
au bouton lorsque seulement disableTagButton
sera vrai, si disableTagButton
sera faux, alors myclass
sera supprimé du bouton.
expression pass to ng-class
peut être une chaîne représentant des noms de classe délimités par un espace, un tableau ou une mappe de noms de classe en valeurs booléennes.
_ {1 - noms de classe délimités par des espaces)
.. ng-class="{strike: deleted, bold: important, red: error}"..
2 - un tableau
.. ng-class="[style1, style2, style3]"..
style1, style2 et style3 sont des classes css consultez la démo ci-dessous pour plus d'informations.
2 - expression
.. ng-class="'my-class' : someProperty ? true: false"..
si someProperty
existe, ajoutez .my-class
sinon, supprimez-le.
Si le nom de la classe css dans le
ng-class
est séparé par un tiret, vous devez le définir en tant que chaîne comme.. ng-class="'my-class' : ..
sinon vous pouvez le définir en tant que chaîne ou non en tant que.. ng-class="myClass : ..
.
<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>
<style>
.myClass {
visibility: hidden
}
</style>
Expression transmet les évaluations [
ng-style][2]
à un objet dont les clés sont des noms de style CSS et les valeurs correspondent aux valeurs correspondantes pour ces clés CSS.
EX:
.. ng-style="{_key_ : _value_}" ...
=> _key_
est la propriété css alors que _value_
définit la valeur de la propriété. Ex => .. ng-style="{color : 'red'}" ...
Si vous utilisez quelque chose comme
background-color
alors que ce n'est pas une clé valide d'un objet, il doit être cité comme.. ng-style="{'background-color' : 'red'}" ...
identique à ng-class.
<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>
alors votre disableTagButton
devrait être comme
$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.
$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.
vous pouvez donc modifier la visibilité du bouton en modifiant le $scope.disableTagButton
.
ou vous pouvez l'utiliser comme expression intégrée,
ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"
someVar
est évalué à true, puis la visibilité est définie sur visible
. Sinon, la visibilité est définie sur hidden
.
Vous pouvez utiliser ng-style
. Exemple simple:
<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>
Au moment de l'exécution, le style change lorsque isMenuOpen
change.
isMenuOpen
est true , vous aurez style="visibility: visible"
.isMenuOpen
est false , vous aurez style="visibility: hidden"
.Voici une directive simple qui définit la visibilité sur masqué ou visible (mais non réduit):
.directive('visible', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.visible, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
Usage:
<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>
Ou si vous utilisez bootstrap, utilisez la classe invisible
ng-class='{"invisible": !controller.isSending}'
Vous devez utiliser ngClass ou ngStyle , dans votre cas:
<button id="tagBtnId" name="TagsFilter"
ng-class="{'button-hidden':!disableTagButton}">Tags</button>
Et ceciCSS:
.button-hidden{
visibility: hidden;
}
voir https://docs.angularjs.org/api/ng/directive/ngShow la section sur la substitution .ng-hide
Tout ce dont vous avez besoin est d’affecter la classe hg-hide-animate
à l’élément
/* 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>
pourquoi vous n'utilisez pas ng-if votre balise n'est pas rendue dans votre page html. Je pense que vous utilisez ceci:
<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>