隐藏在AngularJs中的可见性？

Question 1

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

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

Question 2

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

ng-class

myclass当onlydisableTagButton为true时，它将为按钮添加类；如果disableTagButton为false，myclass则将其从按钮中移除

expression pass tong-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其他，将其删除。

如果css中的类名称以ng-class短划线分隔，则需要将其定义为字符串，.. ng-class="'my-class' : ..否则可以将其定义为字符串或不.. ng-class="myClass : ..

ng级演示

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

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

ng-style

表达式将[ng样式的][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'}"

为someVar，则可见性设置为，visible其他可见性设置为hidden。

Question 3

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

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

在运行时，样式会随着isMenuOpen更改而改变。

如果isMenuOpen为真，您将拥有style="visibility: visible"。
如果isMenuOpen是假的，你就会有style="visibility: hidden"。

Question 4

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

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

展开摘要

Question 5

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

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

Question 6

在这种情况下，应使用ngClass或ngStyle：

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

而这个CSS：

.button-hidden{
   visibility: hidden;
}

Question 7

为什么不使用ng-如果您的标记未在html页面中呈现。我想你用这个：

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

Question 8

请参阅https://docs.angularjs.org/api/ng/directive/ng 显示有关覆盖.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>

展开摘要