Geek Answers Handbook

Set ons-switch with setpoints from Angular controller

I cannot find the correct way to set the attribute 'checked' in ons-switch. This means that I can customize the user configuration page with pre-selected selection fields.

Documents: This is a proven switch, but how to set it using a variable in an angular controller?

For example, if ons-switch has syntax like I could do:

I cannot set the "checked" attribute without a value in angular if necessary in the docs. I also cannot access the variable as it is part of the configuration array.

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, I want html to display buttons that are marked or not marked depending on interests. isChecked is true or false.

+4
1

, ng-model, ons-switch . true false , , ( AngularJS).

, .

CodePen. .

HTML

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

ons.bootstrap()

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

:

- Onsen ons-switch, .

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

, ons-switch. ​​ Onsen UI 1.4, .

, . 'ng-model' . ng-repeat , , ng-model="item.isChecked", isChecked . CodePen, :

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>
Hide result

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}]; 
});
Hide result
+4

More articles:


All Articles