CODEWITHSUNDEEP
angularjsionic-framework
WhiteOne
WhiteOne

Reputation: 897

ionic slide box doesn't show up when ng-show is true

I have a slide box that i want it to appear when i click on a button, so i attach ng-show to ion-slide-box for this purpose as following:

<ion-slide-box ng-show="show" does-continue="true">

          <ion-slide>
            <div class="list card item-card">

              <div class="item">
                <h2>Item_Name</h2>
                <p class="size"><i class="icon ion-tshirt"></i> 36-45</p>
              </div>

              <div class="item item-body text-center">
                <img class="item-image" ng-src="img/3.png">
              </div>

              <div class="item">

                <span class="price">25<i class="icon ion-social-usd"></i></span>
              </div>

            </div>
          </ion-slide>

          <ion-slide>
            <div class="list card item-card">

              <div class="item">
                <h2>Item_Name</h2>
                <p class="size"><i class="icon ion-tshirt"></i> 36-40</p>
              </div>

              <div class="item item-body text-center">
                <img class="item-image" ng-src="img/3.png">
              </div>
                  <div class="item ">
                                   <span class="price">30<i class="icon ion-social-usd"></i></span>
              </div>
                </div>
          </ion-slide>

        </ion-slide-box>

The button code is as follow:

<button class="button" on-touch="showslidebox()">click</button>

the showslidebox() function is as follow:

$scope.show = false; //default: false
  $scope.showslidebox= function() {
    $scope.show = true;
}

When i click the button, the slide box html element appear in Elements section in google inspect, but it doesn't appear on the screen, which is wired, i tried almost everything but still doesn't work. (no error log in console too). any idea what might be the problem?

Upvotes: 0

Views: 339

Answers (2)

WhiteOne
WhiteOne

Reputation: 897

Well, i finally solve the problem by editing the code as below:

  $scope.show = false;
  $scope.click = function () {
    console.log('click');
    $scope.show = !($scope.show);
    $ionicSlideBoxDelegate.update();
  }

Hope it help someone else.

Upvotes: 1

kmalek
kmalek

Reputation: 1

It looks like you have some css assigned to class="animated fadeInRight item-remove-animate"

Maybe item-remove-animate is doing something wrong.

Upvotes: 0

Related Questions