Настроить ons-переключатель с заданными значениями из углового контроллера

Question

Я не могу найти правильный способ установить атрибут 'checked' в ons-switch. Это значит, что я могу настроить страницу пользовательских конфигураций с предварительно выбранными полями выбора.

Документы: Это проверенный переключатель, но как установить его с помощью переменной в угловом контроллере?

Например, если дополнения переключатель имеет синтаксис как я мог бы сделать:

Я не могу показаться, чтобы установить атрибут «проверено» без значения в угловой мере необходимости в документации. Я также не могу получить доступ к переменной, поскольку она является частью массива конфигураций.

Пример кода:

контроллер:

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> 

Так что я хочу, что HTML должен показывать кнопки, которые проверяются/снят в зависимости от interest.isChecked является истинным или ложным.

Answer 1

Прежде всего, вам необходимо связать коммутатор с помощью ng-model, это позволит вам управлять поведением ons-switch непосредственно с контроллера. Установка переменной true или false внутри контроллера автоматически изменит значение состояния коммутатора, то же самое, если вы измените состояние с коммутатора (привязка AngularJS).

Если вы хотите проверить статус коммутатора, вам необходимо проверить значение модели.

Адрес CodePen example. и относительный код.

HTML

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

Контроллер

ons.bootstrap() 
 

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

EDIT: ПЕРЕКЛЮЧАТЕЛЬ ARRAY Пример

Из-за онсэном UI ошибка о инициализации ons-switch элемента, я предлагаю вам использовать следующий код для реализации коммутатора.

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

Внешний вид будет такой же, как ons-switch элемента. Эта ошибка будет исправлена ​​в выпуске Onsen UI 1.4, поэтому вы можете снова использовать элемент переключателя после его выпуска.

Что касается поведения массива коммутаторов, это аналог одного коммутатора. Вам все равно нужно использовать 'ng-model' для привязки статуса коммутатора. Вы используете ng-repeat для отображения элементов коммутатора, поэтому, используя ng-model="item.isChecked", каждый элемент будет привязан к относительному значению isChecked внутри массива. Здесь вы можете найти рабочую CodePen example, и это относительный код:

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>

Контроллер

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}]; 
 
});