CODEWITHSUNDEEP
javascriptangularjscontrollerng-show
user1180888
user1180888

Reputation: 497

Check if div is hidden in AngularJS from controller?

I have a div that I am hiding/showing using angular in my HTML, but I want to know how to check if it is currently hidden or not in my controller.

Any solutions I have found so far are jQuery based using 'hasClass' to find ng-hide, but I don't want to use jQuery.

My div looks like this

<div class="item item-input" ng-show="showDetails"></div>

<button class="button button-block button-light leftTextButton" 
ng-click="showDetails = ! showDetails; updateTimes()">
<i ng-class="{'icon icon ion-minus-round': showDetails, 
'icon icon ion-plus-round': !showDetails}"></i> End Time</button>

I thought from my controller I could just call if($scope.showDetails) and that would return true or false, but it is undefined.

How can I check if a div if hidden or showing from my controller? Thanks

Upvotes: 0

Views: 1568

Answers (1)

user2033671
user2033671

Reputation:

I'm guessing you are having a scoping issue. Passing it to the function that will check it is the best bet. Otherwise if it is in scope the controller should be able to access it.

angular.module('MyApp', [])
  .controller('MyController', ['$scope',
    function($scope) {
      $scope.myBoolean = false;

      $scope.checkMyBooleanOnScope = function() {
        alert($scope.myBoolean);
      };

      $scope.checkMyOtherBooleanOnScope = function() {
        alert($scope.myOtherBoolean);
      };

      $scope.checkBooleanByPassingIt = function(bool) {
        alert(bool);
      };
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
  <p>myBoolean predefined in the controller:{{myBoolean}}
    <input type="checkbox" ng-model="myBoolean" />
  </p>
  <p>
    <button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button>
    <button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button>

  </p>
  <p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}}
    <input type="checkbox" ng-model="myOtherBoolean" />
  </p>
  <p>
    <button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button>
    <button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button>
  </p>

</div>

Upvotes: 1

Related Questions