设置要在 ion-toggle 中检查的默认切换

Posted

技术标签:

【中文标题】设置要在 ion-toggle 中检查的默认切换【英文标题】:Set default toggle to be checked in ion-toggle 【发布时间】:2016-09-29 12:27:12 【问题描述】:

下面是列出切换按钮的代码,我想在其中将第一个切换按钮设置为打开,其余的关闭..

<ion-view view-title="Choose language">
  <ion-content>
    <div class="list"> 
      <ion-toggle ng-repeat="item in lists" ng-model="item.checked"   
        ng-checked="item.checked">
         item.name    
      </ion-toggle>
    </div>
  </ion-content>
</ion-view>

   $scope.lists= [
                 name: 'List1' ,
                 name: 'List2' ,
                 name: 'List3' ,
            ];

我尝试通过提供 $scope.item.checked='List1' 但没有奏效。此问题的任何可能解决方案..

【问题讨论】:

【参考方案1】:

默认情况下,各个型号的切换开关始终处于开启状态:

<ion-toggle item-right (ionChange)="someMethod($event.checked)" checked="somebooleanmodel"></ion-toggle>

【讨论】:

只关注检查属性【参考方案2】:

无论型号如何,默认情况下切换开关始终处于开启状态,请设置:

<ion-toggle ng-checked="true" ng-model="someModel">
  expression   
</ion-toggle>

【讨论】:

【参考方案3】:

在您的标记中,重复中的itemlists 数组中的对象。

试试这个。用这个对象替换$scope.lists

$scope.lists = [
     name: "List1", checked: false ,
     name: "List2", checked: true ,
     name: "List3", checked: false 
  ];

希望对你有帮助。

【讨论】:

以上是关于设置要在 ion-toggle 中检查的默认切换的主要内容,如果未能解决你的问题,请参考以下文章

ion-toggle : 减小切换按钮的大小

离子切换按钮不显示正确的切换 - Ionic 3,Angular 4

Ionic2 ion-toggle 获取 ionChange 的值

Ion-Toggle 刷新后它必须从本地存储中取回数据

Ionic:如何深度定制 ion-toggle?

在离子切换中打开和关闭时如何调用不同的函数