Использование jqLite для скрытия и отображения элементов html

Question

Как и любой нормальный человек, создающий веб-приложение с помощью AngularJS, я сначала попытался использовать ng-hide/ng-show, чтобы некоторые элементы были видны при определенных условиях. По какой-то причине это не хочет работать, и код слишком сложный для меня, чтобы пересчитать его здесь. Я решил, что будет легко использовать jQuery (или, по крайней мере, столько jQuery, сколько Angular). Это то, что я до сих пор:

angular.element(document.querySelector([ELEMENT ID])).off(); 

выше линия работает в целях сокрытия, но я никогда не могу получить его обратно. В случае, если вам интересно, я пытаюсь скрыть кнопки для других несвязанных действий. Использование «.on()» для кода выше не работает. Как эта строка должна быть написана для того, чтобы элемент исчез? Что еще более важно, как мне его снова открыть?

Answer 1

Нам нужна небольшая CSS для этой цели:

.display-hide { 
    display: none; 
} 

Допустит, есть краткое подтверждение мы показываем на странице;

<div class="alert alert-danger display-hide"> 
     <button class="close" data-close="alert"></button> 
     <span> 
      @Html.ValidationSummary(false) 
     </span> 
</div> 

И с помощью JQuery;

jQuery(document).ready(function() { 
    @if(!ViewData.ModelState.IsValid) { 
     <text> 
    $('.alert span').parent().removeClass("display-hide"); 
     </text> 
    } 
    else 
    { 
     <text> 
    $('.alert span').parent().addClass("display-hide"); 
     </text> 
    } 
}); 

Вы можете использовать этот прием для любого элемента html.

Answer 2

on и off методы не предназначены для отображения/скрытия элементов, а для добавления и удаления прослушивателей событий. Я думаю, что случайно ваш элемент уже был скрыт, и это заставило вас поверить off скрывает элемент.

Если вы действительно не можете использовать ng-hide/ng-show я предлагаю вам использовать addClass и removeClass (вместо off и on), чтобы добавить удалить «скрытый» класс/к вашему элементу. Этот класс мог бы установить элементы display в none.

Однако я призываю вас показать угловой код, чтобы мы могли помочь вам решить это, используя ng-show.

Answer 3

ng-show и ng-hide Работа с булевыми значениями. Не используйте jQuery внутри контроллеров. Если вам это нужно, создайте директивы для этой цели.

Создать переменную флага в объеме контроллера. Установите его на true или false

Теперь ng-show покажет элемент, если он получает значение boolean как true и скроется, если получит ложь.

Обратное для ng-hide, оно скроется, если оно получило истинное значение и отобразится, если принимает false.

Так что решайте между одним из них, не используйте оба варианта. Поэтому, учитывая, что имя флага активно, и оно установлено в true, и вы хотите показать кнопку в начале.Код может быть:

angular.module('demo', []).controller('DemoCtrl', function($scope){ 
    $scope.active = true; 
}); 

И шаблон будет выглядеть следующим образом:

<div ng-app="demo"> 
    <div ng-controller="DemoCtrl"> 
    <button type="button" ng-click="active = false" ng-show="active">Hide Me</button> 
    <button type="button" ng-click="active = true" ng-hide="active">Reset</button> 
    </div> 
</div>