दृश्यता AngularJs में छिपी हुई है?

Question 1

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

एनजी-शो लागू display: noneया display: blockसंपत्ति लेकिन मैं आवेदन करना चाहता हूं visibility: hiddenऔर visibility: visibleसंपत्ति।

Question 2

आप नीचे दिए अनुसार उपयोग 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]"..

स्टाइल 1, स्टाइल 2 और स्टाइल 3 सीएसएस कक्षाएं हैं जो अधिक जानकारी के लिए नीचे डेमो की जांच करती हैं।

2 - अभिव्यक्ति

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

यदि somePropertyमौजूद है तो .my-classउसे हटा दें।

यदि सीएसएस श्रेणी का नाम ng-classडैश अलग है तो आपको इसे स्ट्रिंग के रूप में परिभाषित करने की आवश्यकता है जैसे कि .. ng-class="'my-class' : ..आप इसे स्ट्रिंग के रूप में परिभाषित कर सकते हैं या नहीं.. ng-class="myClass : ..

एनजी-क्लास डेमो

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

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

ng-style

एक्सप्रेशन [एनजी-शैली के ][2]उत्थान को एक ऐसी वस्तु से गुजारते हैं जिसकी कुंजी सीएसएस शैली के नाम हैं और मान उन सीएसएस कुंजी के लिए संबंधित मान हैं।

EX:

.. ng-style="{_key_ : _value_}" ...=> संपत्ति मूल्य निर्धारित _key_करते समय सीएसएस संपत्ति है _value_। पूर्व =>.. ng-style="{color : 'red'}" ...

यदि आपका ऐसा कुछ उपयोग कर रहा है, background-colorतो यह किसी वस्तु की वैध कुंजी नहीं है, तो इसे .. 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सच तो दृश्यता सेट करने के लिए मूल्यांकन करता है 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>

Expand snippet

Question 5

या यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो invisibleकक्षा का उपयोग करें

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

Question 6

आपको अपने मामले में ngClass या ngStyle का उपयोग करना चाहिए :

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

और यह सीएसएस :

.button-hidden{
   visibility: hidden;
}

Question 7

आप अपने html पृष्ठ में रेंडर नहीं करते हैं, तो आप एनजी का उपयोग क्यों नहीं करते हैं । मुझे लगता है कि आप इसका उपयोग करते हैं:

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

Question 8

ओवरराइडिंग के बारे में अनुभाग देखें 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>

Expand snippet