angularjs - 使用 Angular Controller 中的预定义值设置 ons-switch

Question

我似乎无法找到在ons-switch 中设置“checked”属性的正确方法。这样我就可以使用预先选中的选择框来设置用户配置页面。

文档:这是一个选中的开关，但如何使用 Angular Controller 中的变量来设置它？

例如，如果ons-switch 的语法如下 我本可以这样做:

我似乎无法按照文档中的需要将属性“checked”设置为没有 Angular 值。我也无法访问该变量，因为它是配置数组的一部分。

代码示例:

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>

所以我想要的是 html 应该根据兴趣显示选中/未选中的按钮。isChecked 是 true 或 false。

Answer 1

首先，您需要将开关与 ng-model 绑定(bind)，这将允许您直接从 Controller 管理 ons-switch 行为。在 Controller 内部设置变量 true 或 false 会自动更改开关状态的值，如果您从开关更改状态(AngularJS 绑定(bind))。

如果要查看开关状态，需要查看型号值。

这是一个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>

Controller

ons.bootstrap()

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

编辑:开关数组示例

由于 Onsen 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 版本中修复，因此您可以在发布后再次开始使用 switch 元素。

对于一组开关的行为，它类似于单个开关。您仍然需要使用“ng-model”来绑定(bind)开关的状态。您正在使用 ng-repeat 来显示开关元素，因此，通过使用 ng-model="item.isChecked"，每个元素都将与相对的 绑定(bind)数组内的 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>  

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