Ng-click restrained within ion-slide

Question

Ng-click restrained within ion-slide

I am using the ionic framework.

I have multiple slide boxes being generated by ng-repeat. For each slide box I wanted to have a section that will appear underneath when the button in the ion-slide is clicked. The code below explains what am I trying to do and what does and does not work. Any help would be greatly appreciated!

<ion-slide-box show-pager="false">

    <ion-slide>
        TEST111111111111
    </ion-slide>

    <ion-slide>
        TEST222222222222
    </ion-slide>

    <ion-slide>
        TEST333333333333

        <button class="button button-dark" ng-click="test = !test">
        Test
        </button>

        Works > True or False? > {{test}}
    </ion-slide>

</ion-slide-box>

Does not work > True or False? > {{test}}

angularjs
ionic-framework

Answer 1

You need to use a variable with a . (dot). See Understanding Scopes in AngularJs

<ion-slide-box show-pager="false">

    <ion-slide>
        TEST111111111111
    </ion-slide>

    <ion-slide>
        TEST222222222222
    </ion-slide>

    <ion-slide>
        TEST333333333333

        <button class="button button-dark" ng-click="someObject.test = !someObject.test">
        Test
        </button>

        Works > True or False? > {{someObject.test}}
    </ion-slide>

</ion-slide-box>

Does not work > True or False? > {{someObject.test}}

And make sure that in your controller you also initialize a value for someObject

$scope.someObject = {
    test: false
};