가시성이 AngularJs에 숨겨져 있습니까?

가시성이 AngularJs에 숨겨져 있습니까?

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

ng-show 적용 완료display: none또는display: block그러나 나는 신청하고 싶다.visibility: hidden그리고.visibility: visible소유물.

다음과 같이 또는 지시사항을 사용할 수 있습니다.

ng-class

그러면 클래스가 추가됩니다.myclass만이 되면 버튼에 딱 맞게disableTagButtontrue 입니다.disableTagButton그럼 거짓이군myclass버튼에서 삭제한다.

expression pass to는 공백으로 구분된 클래스 이름, 배열 또는 클래스 이름을 부울 값에 매핑하는 문자열입니다.

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]키가 CSS 스타일 이름이고 값이 해당 CSS 키에 대응하는 값인 객체에 대한 evals.

예:

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

이someVartrue로 평가한 후 가시성을 true로 설정visible그렇지 않으면 가시성이 로 설정됩니다.hidden.

사용할 수 있습니다.ng-style. 간단한 예:

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

실행 시 스타일은 다음과 같이 변경됩니다.isMenuOpen변화들.

• 언제isMenuOpen사실이야, 넌 곧 알게 될 거야style="visibility: visible".
• 언제isMenuOpen거짓입니다.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="//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>

부트스트랩을 사용하는 경우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;
}

태그가 html 페이지에서 렌더링되지 않으면 ng-를 사용하지 않는 이유이걸 쓰시는 것 같아요.

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

.ng-hide 덮어쓰기 섹션은 https://docs.angularjs.org/api/ng/directive/ngShow 를 참조하십시오.

당신이 필요한 것은 수업을 배정하는 것이다.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>

언급URL : https://stackoverflow.com/questions/26927585/visibility-hidden-in-angularjs