Question

我似乎无法在ons-switch中设置'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应该显示根据兴趣选中/取消选中的按钮.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');
  };
});

编辑：SWITCH ARRAY示例

由于有关ons-switch元素初始化的Onsen UI错误，我建议您使用以下代码来实现切换。

<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'来绑定交换机的状态。您正在使用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}]; 
});

使用Angular控制器中的预定义值设置ons-switch

1 个答案: