Вопрос по css, angularjs, html – видимость скрыта в AngularJs?

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

нг-шоу прикладнаяdisplay: none или жеdisplay: block собственность Но я хочу подать заявкуvisibility: hidden а такжеvisibility: visible имущество.

Ваш Ответ

7   ответов
1

увидеть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>

2

Вы должны использоватьngClass или жеngStyle, в твоем случае:

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

И этоCSS:

.button-hidden{
   visibility: hidden;
}
12

Или, если вы используете загрузчик, используйтеinvisible учебный класс

ng-class='{"invisible": !controller.isSending}'
самое простое и элегантное решение для людей, использующих начальную загрузку. Souhaieb Besbes
0

почему вы не используетенг-если Ваш тег не отображается на вашей HTML-странице. Я думаю, что вы используете это:

<button id="tagBtnId" name="TagsFilter" ng-if="disableTagButton">Tags</button>
Это похоже на отображение, нет, но обязательный стиль видимости: скрытый. Который не то же самое. Yury Kozlov
47

Ты можешь использоватьng-style, Простой пример:

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

Во время выполнения стиль меняется, когдаisMenuOpen изменения.

  • когдаisMenuOpen являетсяправдавы будете иметьstyle="visibility: visible".
  • когдаisMenuOpen являетсяложныйвы будете иметьstyle="visibility: hidden".
ты можешь написать :ng-style="{visibility: isMenuOpen?'visible':'hidden'}"  Цитаты полезны только с составными словами. В противном случае вы можете использовать синтаксис CAML для свойств css, составленных без кавычек. maliness
@Milee Это в HTML. Пример:<div ng-style="{'visibility': isMenuOpen?'visible':'hidden'}">...</div> AlikElzin-kilaka
Спасибо, я сэкономил много времени с вашим кодом. Harshit Pant
Как настроить отображение: блок без истинного ложного условия? например, ng-style = "{" someDivId ", 'display': 'block'}". Я хочу сделать это в HTML, а не в JS. Milee
66

Ты можешь использовать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 и style3 являются классами CSS, посмотрите демонстрацию ниже для получения дополнительной информации.

2 - выражение

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

еслиsomeProperty существует, затем добавьте.my-class иначе удали это.

Если имя класса CSS вng-class разделить тире, то вам нужно определить его как строку.. ng-class="'my-class' : .. иначе вы можете определить его как строку или не как.. ng-class="myClass : ..

нг-класс DEMO

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

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

ng-style

Выражение передать[нг-стиль][2] evals для объекта, ключи которого являются именами стилей CSS, а значения являются соответствующими значениями для этих ключей CSS.

EX:

.. ng-style="{_key_ : _value_}" ... =>_key_ это свойство CSS в то время как_value_ установить значение свойства. Ex =>.. 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.

как я изменил "видимость: видимый". Для этого я должен создать новый класс? chirag
спасибо Михаилу и Калхано. chirag
Просто установите переменную в false, таким образом, класс будет удален Michael
Как настроить отображение: блок без истинного ложного условия? например, ng-style = "{" someDivId ", 'display': 'block'}". Я хочу сделать это в HTML, а не в JS. Milee
задаватьdisableTagButton вfalse затем автоматически классmyClass уберут с кнопки потомvisibility: hidden удалит K.Toress
15

Вот простая директива, которая устанавливает видимость скрытого или видимого (но не свертывания):

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

Команда Angular должна просто добавитьng-visible директивы. iheartcsharp
Мне нравится директивный подход, в этом случае он может быть излишним. Но я все еще люблю это :) Raz0rwire

Похожие вопросы