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

Question

Like any normal person creating a web application using AngularJS, I initially tried using ng-hide/ng-show to make certain elements visible under certain conditions. For some reason, this doesn't want to work, and the code is too complex for me to recount it here. I figured it would be easy to use jQuery (or at least as much jQuery as Angular has built into it). This is what I have so far:

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

The above line works for the purposes of hiding, but I can never get it back. In case you're wondering, I'm trying to hide buttons for otherwise unrelated actions. Using ".on()" for the code above doesn't work. How does this line need to be written in order for the element to disappear? More importantly, How do I make it reappear?

Answer 1

ng-show and ng-hide work with boolean values. Don't use jQuery inside the controllers. If you are needy to use that, create directives for that purpose.

Create flag variable in scope of controller. Set it to true or false

Now ng-show will show the element if it receives boolean value as true and will hide if it receives false.

Vice versa for ng-hide, it will hide if it received true and show if receives false.

So decide between either one of them, don't use both. So considering flag name is active and it is set to true and you want to show button in beginning. The code can be:

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

And the template will look like:

<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

We need a small css for this purpose:

.display-hide {
   display: none;
}

Lets say there is an validation summary we are showing on the page;

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

And with using 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>
   }
});

You can use this trick for any html element.

Answer 3

on and off methods are not for showing/hiding elements but for adding and removing event listeners. I think by accident your element was already hidden and that led you to believe off hides element.

If you really can't use ng-hide/ng-show I suggest you use addClass and removeClass (instead of off and on ) to add/remove 'hidden' class to your element. This class could would set the elements display to none .

However I encourage you to show the angular code so we can help you solve this using ng-show .