隐藏在AngularJs中的可见性？
<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button> ng显示应用display: none或display: block属性但我想应用visibility: hidden和visibility: visible属性。
你可以像下面那样使用ng-class或ng-style指令
ng-class
当只有disableTagButton为true时，这将添加类myclass到button，如果disableTagButton是false，那么myclass将从button中移除
传递给ng-classexpression式可以是一个表示空格分隔的类名string，一个数组或一个类名称为布尔值的映射表。
1 – 空格分隔的类名
.. ng-class="{strike: deleted, bold: important, red: error}"..
2 – 一个数组
.. ng-class="[style1, style2, style3]"..
style1，style2和style3是CSS类检查下面的演示了解更多信息。
2 – expression
.. ng-class="'my-class' : someProperty ? true: false"..
如果someProperty存在然后添加.my-class否则删除它。
如果
ng-class的css类名是短划分的，那么你需要将它定义为string，例如.. ng-class="'my-class' : ..否则你可以把它定义为string或者不作为.. ng-class="myClass : ..
ng级DEMO
<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button> <style> .myClass { visibility: hidden } </style>
ng-style
expression式将[ ng-style ][2] evals传递给一个对象，该对象的键是CSS样式名称，值是这些CSS键的对应值。
EX：
.. ng-style="{_key_ : _value_}" ... => _key_是css属性，而_value_设置属性值。 Ex => .. ng-style="{color : 'red'}" ...
如果你使用的东西像
background-color那么它不是一个对象的有效的关键，那么它需要被引用为.. ng-style="{'background-color' : 'red'}" ...与ng-类。
<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来改变button的可见性。
或者你可以使用它作为内联expression式，
ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"
是someVar评估为true，然后将可见性设置为visible Else可见性设置为hidden 。
你可以使用ng-style 。 简单的例子：
ng-style="{'visibility': isMenuOpen?'visible':'hidden'}"
运行时，样式在isMenuOpen更改时更改。
- 当
isMenuOpen为true时 ，您将拥有style="visibility: visible"。 - 当
isMenuOpen为false时 ，您将拥有style="visibility: hidden"。
这是一个简单的指令，将隐藏或可见的可见性设置为可见（但不能折叠）：
.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="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>
或者如果你使用引导，使用invisible类
ng-class='{"invisible": !controller.isSending}'
您应该使用ngClass或ngStyle ，在你的情况下：
<button id="tagBtnId" name="TagsFilter" ng-class="{'button-hidden':!disableTagButton}">Tags</button>
而这个CSS ：
.button-hidden{ visibility: hidden; }
看到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>
为什么你不使用ng – 如果你的标签没有呈现在你的html页面中。 我想你使用这个：
<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
