2017-06-16 110 views
0

我有一些离子复选框内的一个ng-重复最初检查一些复选框。我似乎无法设法在表单提交上绑定这些初始值。以下是我与迄今为止的工作:绑定离子复选框的值与初始选中的值

HTML:

<ion-list> 
     <label ng-repeat="item in items"> 
      <ion-checkbox ng-model="item.checked" ng-checked="itemCheck(item)"> 
       {{item.name}} 
      </ion-checkbox> 
     </label> 
</ion-list> 

JS:

$scope.items = [{name:"name1"},{name:"name2"},{name:"name3"},{name:"name4"}]; 
$scope.itemCheck = function(data){ 
    $scope.checkedItems = [{name:"name2"},{name:"name3"}]; 
    $scope.checkedResult = $scope.checkedItems.filter(function(item) { 
      return item.name == data.name; 
    }); 

    if ($scope.checkedResult.length > 0){ 
     return true; 
    } else { 
     return false; 
    } 
} 

https://codepen.io/pixeloft/pen/LLboWG?editors=1000

回答

0

很是怪异使用ng-modelng-checked在一起。我只使用ng-model,我没有问题。 只需保持简单的模型:而不是$scope.checkedItems = [{name:"name2"},{name:"name3"}];为什么不只是设置每个项目的检查属性?

初始化您的项目是这样的: $scope.items = [{name:"name1"},{name:"name2", checked: true},{name:"name3", checked: true},{name:"name4"}];

0

尝试这种方式。

HTML

<ion-list> 
     <label ng-repeat="item in items"> 
      <ion-checkbox ng-model="item.checked" ng-checked="itemCheck(item,$index)"> 
       {{item.name}} 
      </ion-checkbox> 
     </label> 
</ion-list> 

JS

$scope.items = [{name:"name1"},{name:"name2"},{name:"name3"},{name:"name4"}]; 
$scope.itemCheck = function(data,index){ 
    $scope.checkedItems = [{name:"name2"},{name:"name3"}]; 
    $scope.checkedResult = $scope.checkedItems.filter(function(item) { 
      return item.name == data.name; 
    }); 

    if ($scope.checkedResult.length > 0){ 
     $scope.items[index].checked=true; 
     return true; 
    } else { 
     $scope.items[index].checked=false; 
     return false; 
    } 
} 

我codepen测试和它的作品! 我真的不知道这是你在找什么,但让我知道!

+0

https://codepen.io/jhonnyvennom/pen/ZyBgKv?editors=0010 –