Question

与使用AngularJS创建Web应用程序的任何普通人一样，我最初尝试使用ng-hide / ng-show在某些条件下使某些元素可见。出于某种原因，这并不想工作，代码太复杂了，我不能在这里重述它。我认为使用jQuery很容易（或者至少和Angular内置的jQuery一样多）。这就是我到目前为止所做的：

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

以上一行是为了隐藏，但我永远无法收回。如果你想知道，我试图隐藏其他不相关动作的按钮。使用＆＃34; .on（）＆＃34;因为上面的代码不起作用。为了使元素消失，需要如何编写这一行？更重要的是，我如何重新出现？

Answer 1

ng-show和ng-hide使用布尔值。不要在控制器中使用jQuery。如果您需要使用它，请为此目的创建指令。

在控制器范围内创建标志变量。将其设置为true或false

现在ng-show将显示元素，如果它接收布尔值为true，并且如果它接收到false将隐藏。

对于ng-hide反之亦然，如果收到true则隐藏，如果收到错误则显示。

因此，在其中任何一个之间做出决定，不要同时使用它们。因此，考虑到标志名称处于活动状态并且设置为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>

Answer 2

我们需要一个小的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 3

on和off方法不是用于显示/隐藏元素，而是用于添加和删除事件侦听器。我认为你的元素已经被隐藏了，这让你相信off隐藏了元素。

如果您确实无法使用ng-hide/ng-show，建议您使用addClass和removeClass（而不是off和on）来添加/删除隐藏'你的元素的类。此类可以将元素display设置为none。

但是，我建议您显示角度代码，以便我们使用ng-show帮助您解决此问题。

使用jqLite隐藏和显示html元素

3 个答案:

使用jqLit​​e隐藏和显示html元素

3 个答案:

使用jqLite隐藏和显示html元素