隐藏在AngularJs中的可见性？

Question

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

NG-显示应用display: none或display: block财产,但我想申请visibility: hidden和visibility: visible财产.

Answer 1

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

ng-class

myclass只有当disableTagButton为true时,这将为按钮添加类,如果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其他删除它.

如果ms中的css类名ng-class是dash分隔的,那么你需要将它定义为字符串,.. 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样式的][2]evals传递给一个对象,该对象的键是CSS样式名称,值是这些CSS键的对应值.

EX:

.. ng-style="{_key_ : _value_}" ...=> _key_是_value_设置属性值时的css属性.Ex =>.. 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'}"

是someVartrue那么可见性设置为visible否则可见性设置为hidden.

Answer 2

你可以用ng-style.简单示例:

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

在运行时,样式在更改时会isMenuOpen更改.

• 什么时候isMenuOpen是真的,你会有style="visibility: visible".
• 什么时候isMenuOpen是假的,你会有的style="visibility: hidden".

Answer 3

这是一个简单的指令,将可见性设置为隐藏或可见(但不是崩溃):

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

Answer 4

或者如果您使用的是bootstrap,请使用invisible该类

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