AngularJs에 숨겨진 가시성?

Question 1

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

ng-show 적용 display: none또는 display: block재산 그러나 나는 적용 visibility: hidden하고 visibility: visible재산.

Question 2

다음과 같이 ng-class또는 ng-style지시문을 사용할 수 있습니다.

ng-class

이것은 true 일 myclass때만 버튼 에 클래스 를 추가 하고, false disableTagButton일 때 버튼에서 제거합니다.disableTagButtonmyclass

표현식 전달 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다른 제거합니다.

의 css 클래스 이름 ng-class이 대시로 구분 된 경우 .. ng-class="'my-class' : ..다른 것과 같이 문자열로 정의해야합니다... ng-class="myClass : ..

ng-class 데모

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

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

ng-style

표현식 은 키가 CSS 스타일 이름이고 값이 해당 CSS 키에 해당하는 값인 객체에 [ng 스타일 평가를 전달합니다 ][2].

전의:

.. ng-style="{_key_ : _value_}" ...=> 속성 값 _key_을 _value_설정하는 동안 css 속성 입니다. 예 =>.. 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'}"

인 someVar에 true의 가시성 세트로 평가 visible에 그렇지 가시성 설정 hidden.

Question 3

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

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

런타임에 스타일이 변경되면 isMenuOpen변경됩니다.

때 isMenuOpen입니다 사실 , 당신은 할 수 있습니다 style="visibility: visible".
때 isMenuOpen입니다 거짓 , 당신은 할 수 있습니다 style="visibility: hidden".

Question 4

다음은 표시 여부를 숨김 또는 표시 (축소는 아님)로 설정하는 간단한 지시문입니다.

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

스 니펫 확장

Question 5

또는 부트 스트랩을 사용하는 경우 invisible클래스를 사용하십시오.

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

Question 6

귀하의 경우에는 ngClass 또는 ngStyle을 사용해야 합니다.

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

그리고이 CSS :

.button-hidden{
   visibility: hidden;
}

Question 7

태그가 html 페이지에서 렌더링되지 않으면 ng-if를 사용하지 않는 이유 . 나는 이것을 사용한다고 생각합니다.

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

Question 8

https://docs.angularjs.org/api/ng/directive/ng를 참조 하십시오 . .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>

스 니펫 확장