web-dev-qa-db-fra.com

visibilité cachée dans AngularJs?

<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.

htmlcssangularjs
70
chirag

Vous pouvez utiliser ng-class ou ng-style comme ci-dessous

ng-class 

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 : ...

DEMO classe ng

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

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

ng-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.

66
K.Toress

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.

  • Lorsque isMenuOpen est true , vous aurez style="visibility: visible".
  • Lorsque isMenuOpen est false , vous aurez style="visibility: hidden".
47
AlikElzin-kilaka

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>

15
Gruff Bunny

Ou si vous utilisez bootstrap, utilisez la classe invisible

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

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;
}
2
Michael

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>

1
user2173403

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>
0
Sandeep