Html 隐藏在 AngularJs 中的可见性？

visibility hidden in AngularJs?

提问by chirag

<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>

ng-showapplied display: noneor display: blockproperty But I want to apply visibility: hiddenand visibility: visibleproperty.

ng-show申请display: none或display: block财产 但我想申请visibility: hidden和visibility: visible财产。

采纳答案by Kalhan.Toress

You can use ng-classor ng-styledirectives as below

您可以使用ng-class或ng-style指令如下

ng-class

ng-class

this will add class myclassto the button when only disableTagButtonis true , if disableTagButtonis false then myclasswill remove from the button

这只会myclass在disableTagButton为 true时为按钮添加类，如果disableTagButton为 falsemyclass则将从按钮中删除

expression pass to ng-classcan be a string representing space delimited class names, an array, or a map of class names to boolean values.

表达式传递到ng-class可以是一个字符串，表示以空格分隔的类名、数组或类名到布尔值的映射。

1 - space delimited class names

1 - 空格分隔的类名

.. ng-class="{strike: deleted, bold: important, red: error}".. 

2 - an array

2 - 一个数组

.. ng-class="[style1, style2, style3]".. 

style1, style2 & style3 are css classes check the below demo for more info.

style1、style2 和 style3 是 css 类，请查看下面的演示以获取更多信息。

2 - expression

2 - 表达

.. ng-class="'my-class' : someProperty ? true: false".. 

if somePropertyexists then add .my-classelse remove it.

如果someProperty存在则添加.my-class其他删除它。

If the css class name in the ng-classis dash separated then you need to define it as string like .. ng-class="'my-class' : ..else you can define it as string or not as .. ng-class="myClass : ..

如果 css 类名以ng-class破折号分隔，那么您需要将其定义为字符串，.. ng-class="'my-class' : ..否则您可以将其定义为字符串或不定义为.. ng-class="myClass : ..

ng-class DEMO

ng级演示

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

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

---

---

ng-style

ng-style

Expression pass the [ng-style][2]evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

表达式将[ng-style ][2]evals 传递给一个对象，该对象的键是 CSS 样式名称，值是这些 CSS 键的对应值。

EX:

前任：

.. ng-style="{_key_ : _value_}" ...=> _key_is the css property while _value_set the property value. Ex => .. ng-style="{color : 'red'}" ...

.. ng-style="{_key_ : _value_}" ...=>_key_是_value_设置属性值时的 css 属性。例如 =>.. ng-style="{color : 'red'}" ...

If your using something like background-colorthen its not a valid key of a object then it needs to be quoted as .. ng-style="{'background-color' : 'red'}" ...same as ng-class.

如果您使用类似background-colorthen 它不是对象的有效键，则需要将其引用为.. ng-style="{'background-color' : 'red'}" ...与 ng-class 相同。

<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>

then your disableTagButtonshould be like

那么你disableTagButton应该像

$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.

$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.

so u can change the visibility of the button by changing the $scope.disableTagButton.

因此您可以通过更改$scope.disableTagButton.

or you can use it as inline expression as,

或者您可以将其用作内联表达式，

ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"

is someVarevaluates to true then visibility set to visibleElse visibility set to hidden.

issomeVar评估为 true 然后可见性设置为visibleElse 可见性设置为hidden。

回答by AlikElzin-kilaka

You can use ng-style. Simple Example:

您可以使用ng-style. 简单示例：

<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>

At runtime, the style changes when isMenuOpenchanges.

在运行时，样式随变化而isMenuOpen变化。

• When isMenuOpenis true, you'll have style="visibility: visible".
• When isMenuOpenis false, you'll have style="visibility: hidden".

• 当isMenuOpen为true 时，您将拥有style="visibility: visible".
• 当isMenuOpen为false 时，您将拥有style="visibility: hidden".

回答by Gruff Bunny

Here's a simple directive that sets the visibility to hidden or visible (but not collapse):

这是一个将可见性设置为隐藏或可见（但不折叠）的简单指令：

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

回答by Duane Fields

Or if you are using bootstrap, use the invisibleclass

或者，如果您使用的是引导程序，请使用invisible该类

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

回答by Michael

You should use ngClassor ngStyle, in your case:

在您的情况下，您应该使用ngClass或ngStyle：

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

And this CSS:

这个CSS：

.button-hidden{
   visibility: hidden;
}

回答by Sandeep

why you not use ng-ifyour tag not render in your html page. I think you use this:

为什么你不使用ng-if你的标签没有在你的 html 页面中呈现。我想你用这个：

<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>

回答by user2173403

see https://docs.angularjs.org/api/ng/directive/ngShowthe section about Overriding .ng-hide

请参阅https://docs.angularjs.org/api/ng/directive/ngShow有关覆盖 .ng-hide 的部分

All you need is to assign the class hg-hide-animateto the element

您所需要的只是将类分配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>