Question

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

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

Answer 1

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

ng-class

如果myclass为真，则会向该按钮添加课程disableTagButton，如果disableTagButton为假，则myclass将从按钮中删除

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

1 - 以空格分隔的类名

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

2 - 数组

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

style1，style2＆amp; 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样式][2] evals传递给一个对象，其键是CSS样式名称，值是这些CSS键的对应值。

EX：

.. ng-style="{_key_ : _value_}" ... =＆gt; _key_是css属性，_value_设置属性值。 Ex =＆gt; .. ng-style="{color : 'red'}" ...

如果您使用background-color之类的内容，那么它不是对象的有效密钥，则需要引用与ng-class相同的.. ng-style="{'background-color' : 'red'}" ...。

<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的评估结果为true，然后将展示次数设置为visible其他展示次数设置为hidden。

Answer 2

您可以使用class JsonSerializer(object): """A mixin that can be used to mark a SQLAlchemy model class which implements a :func:`to_json` method. The :func:`to_json` method is used in conjuction with the custom :class:`JSONEncoder` class. By default this mixin will assume all properties of the SQLAlchemy model are to be visible in the JSON output. Extend this class to customize which properties are public, hidden or modified before being being passed to the JSON serializer. """ __json_public__ = None __json_hidden__ = None __json_modifiers__ = None def get_field_names(self): for p in self.__mapper__.iterate_properties: yield p.key def to_json(self): field_names = self.get_field_names() public = self.__json_public__ or field_names hidden = self.__json_hidden__ or [] modifiers = self.__json_modifiers__ or dict() rv = dict() for key in public: rv[key] = getattr(self, key) for key, modifier in modifiers.items(): value = getattr(self, key) rv[key] = modifier(value, self) for key in hidden: rv.pop(key, None) return rv。简单示例：

ng-style

在运行时，样式会在<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div>更改时更改。

当isMenuOpen 为真时，您将拥有isMenuOpen。
当style="visibility: visible" 错误时，您将拥有isMenuOpen。

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}'

Answer 5

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

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

这个 CSS ：

.button-hidden{
   visibility: hidden;
}

Answer 6

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

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

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

隐藏在AngularJs中的可见性？

7 个答案: