Set ons-switch with predifined values from Angular controller

Question

I cannot seem to get the correct way to set the 'checked' attribute in ons-switch. This is so that I can setup user configurations page with pre-checked select boxes.

The Docs: This is a checked switch but how do I set this using a variable in an angular controller?

For example, if ons-switch has a syntax like I could have done:

I cannot seem to set attribute "checked" with no value in angular, as needed in the docs. I'm also unable to access the variable since it is part of an array of configurations.

Code Example:

controller:

var categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}];

html:

<ons-list-item ng-repeat="interest in categInfo" >
    <span style="color: #666">{{interest.Interest}}</span>
    <ons-switch modifier="list-item" var="{{interest.Interest}}" checked="{{interest.isChecked}}"></ons-switch>
</ons-list-item>

So what I want is that the html should show buttons that are checked/unchecked depending on interest.isChecked is true or false.

Have you tried using 'ng-model' and bind the switch with it? Do you have some code? — Andi Pavllo
Hi Andi, I have updated the post with simplified code to explain what I am trying... The problem is that checked=true and checked=false in the html both show a button that is checked. — Gibbet

Andi Pavllo Andi Pavllo · Accepted Answer · 2015-06-02T02:22:22

First of all, you need to bind the switch with ng-model, this will allow you to manage the ons-switch behavior directly from the controller. Setting the variable true or false, inside the controller, will automatically change the value of the state of the switch, same thing if you change the state from the switch (AngularJS binding).

If you want to check the status of the switch, you need to check the model value.

Here is a CodePen example. and the relative code.

HTML

<div ng-controller="MyController">
  <ons-switch ng-model="switch"></ons-switch>
  <ons-button ng-click="changeSwitch()">Change switch status</ons-button>
</div>

Controller

ons.bootstrap()

.controller('MyController', function ($scope) {
  $scope.changeSwitch = function() {
    $scope.switch = !$scope.switch;
    if($scope.switch)
      alert('checked');
    else
      alert('unchecked');
  };
});

EDIT: SWITCH ARRAY EXAMPLE

Due to an Onsen UI bug about the initialization of the ons-switch element, I suggest you to use the following code to implement your switch.

<label class="switch">
    <input type="checkbox" class="switch__input" checked>
    <div class="switch__toggle"></div>
</label>

The appearance will be the same as the ons-switch element. This bug will be fixed in Onsen UI 1.4 release, so you can start using again the switch element after its release.

For what concerns the behavior of an array of switches, it's analog of the single switch. You still need to use 'ng-model' to bind the status of the switch. You are using ng-repeat to display the switch elements so, by using ng-model="item.isChecked", every element will be binded with the relative isChecked value inside the array. Here you can find a working CodePen example, and this is the relative code:

HTML

<div ng-controller="MyController">
  <h2>What I am trying</h2>
  <div ng-repeat="item in categInfo"> 
  <div>This button should be {{item.isChecked}}</div>      
    <label class="switch">
      <input ng-model="item.isChecked" type="checkbox" class="switch__input" checked>
      <div class="switch__toggle"></div>
    </label>
  </div>
</div>

Controller

ons.bootstrap()

.controller('MyController', function ($scope, $timeout) {
  //Need to go through the array and set as checked or not
  $scope.categInfo = [{Interest:'Classic', isChecked:true}, {Interest:'New', isChecked:false}]; 
});

Set ons-switch with predifined values from Angular controller

1 Answers