如何在 Ionic 框架中使用复选框项？答案

【问题标题】：How to use Checkbox Item in Ionic framework?如何在 Ionic 框架中使用复选框项？
【发布时间】：2016-03-14 17:49:57
【问题描述】：

我正在使用 Ionic 框架开发移动应用程序。我不知道如何列出检查项目？我尝试了很多方法来做到这一点

有人可以帮我吗？

例如我的复选框部分代码：

>    <ul class="list" ng-repeat="item in TreatmentsSpa">
>       <li class="item item-checkbox">
>         <label class="checkbox">
>           <input type="checkbox">
>         </label>
>       {{item.Name}}
>       </li>

TreatmentSpa 是来自 Webapi 的 JSON

我想制作一个包含选中项目名称的列表。

【问题讨论】：

标签： angularjs checkbox ionic-framework ionic

【解决方案1】：

这可能对你有帮助..这里我在运行时设置了 ng-model (treatment.selected)。

<ion-view view-title="films" ng-controller="TreatmentSpaController">     <ion-content class="padding">
 <div class="item-accordion"
      ng-repeat="treatment in TreatmentSpa track by $index">
   <ion-item class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox" ng-model="treatment.selected" ng-change="updateTreatmentSpa(treatment)">
     </label>
     {{treatment.name}}
   </ion-item>
 </div>   </ion-content>

控制器：

.controller('TreatmentSpaController', function($scope,$http ) {
$scope.treatmentSpaCheckedItems = [];
$scope.TreatmentSpa = [
  {name:'One'},
  {name:'Two'},
  {name:'Three'},
  {name:'Four'},
  {name:'Five'}
];

$scope.updateTreatmentSpa = function(treatment){
  console.log(' new name  :'+treatment.name);
  if(treatment.selected){
    $scope.treatmentSpaCheckedItems.push(treatment.name);
  }else{
 $scope.treatmentSpaCheckedItems.splice($scope.treatmentSpaCheckedItems.indexOf(treatment.name), 1);
  }
   console.log('checked TreatmentSpa:'+$scope.treatmentSpaCheckedItems);
};});

【讨论】：