khả năng hiển thị ẩn trong AngularJs?

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

ng-show áp dụng display: nonehoặc display: blocktài sản Nhưng tôi muốn áp dụng visibility: hiddenvà visibility: visibletài sản.

Bạn có thể sử dụng ng-classhoặc ng-stylehướng dẫn như bên dưới

ng-class

điều này sẽ thêm lớp myclassvào nút khi chỉ disableTagButtonđúng, nếu disableTagButtonsai thì myclasssẽ xóa khỏi nút

biểu thức truyền tới ng-classcó thể là một chuỗi biểu thị các tên lớp được phân cách bằng dấu cách, một mảng hoặc một bản đồ tên lớp với các giá trị boolean.

1 - tên lớp được phân tách bằng dấu cách

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

2 - một mảng

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

style1, style2 & style3 là các lớp css, hãy kiểm tra bản trình diễn bên dưới để biết thêm thông tin.

2 - biểu thức

.. ng-class="'my-class' : someProperty ? true: false".. 

nếu somePropertytồn tại sau đó thêm .my-classkhác loại bỏ nó.

Nếu tên lớp css trong ng-classdấu gạch ngang được phân tách thì bạn cần xác định nó dưới dạng chuỗi giống như .. ng-class="'my-class' : ..những người khác, bạn có thể xác định nó là chuỗi hoặc không.. ng-class="myClass : ..

ng-class DEMO

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

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

ng-style

Biểu thức chuyển các [evals ng-style ][2]cho một đối tượng có khóa là tên kiểu CSS và giá trị là các giá trị tương ứng cho các khóa CSS đó.

VÍ DỤ:

.. ng-style="{_key_ : _value_}" ...=> _key_là thuộc tính css trong khi _value_đặt giá trị thuộc tính. Ví dụ =>.. ng-style="{color : 'red'}" ...

Nếu bạn sử dụng một cái gì đó giống như background-colorthì nó không phải là một khóa hợp lệ của một đối tượng thì nó cần được trích dẫn .. ng-style="{'background-color' : 'red'}" ...giống như ng-class.

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

sau đó bạn disableTagButtonsẽ giống như

$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.

$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.

vì vậy bạn có thể thay đổi khả năng hiển thị của nút bằng cách thay đổi $scope.disableTagButton.

hoặc bạn có thể sử dụng nó dưới dạng biểu thức nội dòng,

ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"

được someVarđánh giá là true sau đó được đặt thành visibleKhả năng hiển thị khác được đặt thành hidden.

Bạn có thể sử dụng ng-style. Ví dụ đơn giản:

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

Trong thời gian chạy, kiểu thay đổi khi isMenuOpenthay đổi.

• Khi isMenuOpenlà sự thật , bạn sẽ có style="visibility: visible".
• Khi nào isMenuOpenlà sai , bạn sẽ có style="visibility: hidden".

Đây là một lệnh đơn giản đặt chế độ hiển thị thành ẩn hoặc hiện (nhưng không thu gọn):

.directive('visible', function() {

    return {
        restrict: 'A',

        link: function(scope, element, attributes) {
            scope.$watch(attributes.visible, function(value){
            element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

Sử dụng:

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

Hoặc nếu bạn đang sử dụng bootstrap, hãy sử dụng invisiblelớp

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

Bạn nên sử dụng ngClass hoặc ngStyle , trong trường hợp của bạn:

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

Và CSS này :

.button-hidden{
   visibility: hidden;
}

tại sao bạn không sử dụng ng-nếu thẻ của bạn không hiển thị trong trang html của bạn. Tôi nghĩ bạn sử dụng cái này:

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

xem https://docs.angularjs.org/api/ng/directive/ngHiển thị phần về Ghi đè .ng-hide

Tất cả những gì bạn cần là gán lớp hg-hide-animatecho phần tử

/* 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>