使用来自 Angular 控制器的预定义值设置开关

Question

我似乎无法获得在 ons-switch 中设置 'checked' 属性的正确方法。这样我就可以使用预先选中的 select 框设置用户配置页面。

文档：这是一个选中的开关，但如何使用 angular 控制器中的变量设置它？

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

我似乎无法根据文档中的需要在 angular 中设置没有值的属性 "checked"。我也无法访问变量，因为它是配置数组的一部分。

代码示例：

控制器：

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 应该显示 checked/unchecked 的按钮，具体取决于 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');
  };
});

编辑：开关数组示例

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

关于开关阵列的行为，它是单个开关的模拟。您仍然需要使用 '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 控制器的预定义值设置开关

Set ons-switch with predifined values from Angular controller

angularjs

onsen-ui