Ion Toggle Check List

ionic-v1
1

hello there,

in here, I have a problem…

image
FireShot Capture 7 - ABSENSE CLASS X - http___localhost_8100_#_absensi.png315×560 23.8 KB

I use the toggle to mark the user is, and then I want to keep that data based on existing user list or toggle the slide,

can anyone ever tried like this.

2

In your controller:

$scope.myToggle = { checked: true/false; }

$scope.onMyToggleChange = function() {
    if ($scope.myToggle.checked) { ... } // if it has been checked NOW ...
    if (!$scope.myToggle.checked) { ... } // if it has been unchecked NOW ...
}

In your view:

<label class="toggle toggle-balanced">
    <input type="checkbox" ng-model="myToggle.checked" ng-change="onMyToggleChange()">
    <div class="track">
        <div class="handle"></div>
    </div>
</label>

The ngModel value “myToggle” is your data-bound object and the checked field holds an boolean of the state of your toggle button.

3

ok… i try your answer…

but when I slide one of the toggle, all togglenya participate slides

4

because all the toggle you use have the same model name i think…

5

yah…

you have a solution…?

6

name the toggles with different model names…

7

Every toggle needs his own model.

ng-model="myFirstToggle.checked"
ng-model="mySecondToggle.checked"
ng-model="myBulbToggle.checked"
ng-model="larasOnOffToggle.checked"

… same in your controller.

Look, a toggle needs a model. This model is data bound with the $scope of your view (html). Your controller has access to that $scope (JavaScript). You can change the value of the model by controller (over the $scope) or by the view (mouse click on the toggle). If every toggle on your view has the same model and one of the toggle changes the model value, the other toggles (with the same model) will get this value, too.

And because of that, all your toggles “toggled”, when you clicked on only one. So … give every toggle its own unique model and they’ll work for its own.

You don’t need to use the ngClick event explicitly! Your model value will change directly by it self. The event handler for the ngClick event is only usefull, if you want that something different happens, when the user clicks on the toggle (for example playing a sound) in the view.