CODEWITHSUNDEEP
angularjsionic-framework
sim kaur
sim kaur

Reputation: 163

ng-if /ng-show working only when page loads in ionic

I have a nested state .

The view associated to it my app header.

it looks like this:

<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">

                {{ showSubHeader}}
            <div ng-if="showSubHeader" class="topPull" draggable >
            <button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
                           </div>       
        </div>               

</div>
</ion-view>

Now, I want div to be shown when showSubHeader is true.

The expression {{ showSubHeader }} changes from true to false correctly, but div does not hide/show according to value variable.

Is there a way to fix it?

Initially on page load, div shows/hides accordingly but div does not hide when variable value changes after loading.

controller:

.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {

$scope.showHeader=true;
 $scope.showSubHeader=true;

  $scope.checkBill= function(){
      $scope.showSubHeader=false;
     $state.go('menu.TotalBill')

  }



})

Upvotes: 0

Views: 1412

Answers (1)

wowsohigh
wowsohigh

Reputation: 11

Change $scope.showSubHeader=false; to $scope.showSubHeader =!$scope.showSubHeader;, then you will be fine.

Check out my example:

var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
  $scope.test = true;
  $scope.hidden_test = true;
  $scope.click = function() {
    $scope.hidden_test = !$scope.hidden_test;
  };
}]);
.outer {
  background: #e2e2e2;
  border: 1px solid #000000;
  .inner {
    background: #c2c2c2;
    border: 1px solid #00aa00;
    padding: 1px 0 0 25px;
  }
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div ng-app="app">
  <div ng-controller="myctrl">
    <div class="outer" ng-if="test">
      <p>Test</p>
      <div class="inner" ng-if="hidden_test">
        <p>Hidden Test</p>
      </div>
      <button ng-click="click()">Click</button>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions