在离子框架中禁用复选框的离子列表

Question

这是我的Codepen 。

在此演示应用程序中，我有两个列表数组。 一个是items ，第二个是items items1 。

我想要：

1. 以这样的方式显示列表，其中应该预先检查items1中位于items数组中的某些items1 。
2. 我不希望用户选中和取消选中。 因此，这意味着应禁用复选框。

如何使用我之前共享的演示Codepen做到这一点。 任何帮助，将不胜感激。

Answer 1

我建议您ng-init设置item.checked的值在输入init

ng-init="item.checked = (items1|filter: {id: item.id})[0].id == item.id;"

工作码笔

Answer 2

根据要设置预检项目的动态程度，可以执行以下操作之一。

禁用用户单击

根据您要的是灰色复选框还是蓝色复选框

蓝色复选框

更改

<input type="checkbox" ng-click=" $event.stopPropagation();" ng-model="item.checked">

至

<input type="checkbox" ng-click="toggleItem(item) $event.stopPropagation();" ng-model="item.checked">

基本上删除将为项目设置检查值的单击功能。

灰色复选框

只需使用禁用的属性disabled <input>元素，例如<input type="checkbox" disabled>

情况1：您的商品始终保持不变（您创建商品）

对于$scope.items和$scope.items1每个匹配项，您向匹配项添加一个称为checked:true的键。 在您的情况下，将如下创建数组

$scope.items1 = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 9 },
    { id: 10 }
  ];

  $scope.items = [
    { id: 1, checked:true },
    { id: 2, checked:true },
    { id: 3, checked:true },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9, checked:true },
    { id: 10, checked:true }
 ];

情况2：根据其ID动态查找匹配项

$scope.items1 = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 9 },
    { id: 10 }
];

$scope.items = [
    { id: 1},
    { id: 2},
    { id: 3},
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9},
    { id: 10}
];

for(var i=0; i<$scope.items.length; i++){
    for(var k=0; k<$scope.items1.length; k++){
      if($scope.items[i].id == $scope.items1[k].id){ 
         $scope.items[i].checked = true;
         break;
      }
    }    
}