隐藏在AngularJs中的可见性？

Question

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

ng-show 应用了display: none 或display: block 属性但我想应用visibility: hidden 和visibility: visible 属性。

Answer 1

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

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

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

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

Answer 2

见https://docs.angularjs.org/api/ng/directive/ngShow 关于覆盖 .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;
}

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

Answer 3

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

ng-class

当只有 disableTagButton 为 true 时，这将向按钮添加类 myclass，如果 disableTagButton 为 false 则 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 否则删除它。

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

ng-class DEMO

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

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

---

ng-style

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

前：

.. ng-style="{_key_ : _value_}" ... => _key_ 是 css 属性，而 _value_ 设置属性值。例如 => .. 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'}"

is someVar 计算结果为 true，然后可见性设置为 visible Else 可见性设置为 hidden。

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

还有这个CSS：

.button-hidden{
   visibility: hidden;
}

Answer 7

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

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

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>