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

Question

这是我的 Codepen 。

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

我想：

1. 显示列表，以便在items中预先检查items1数组中的某些项目。
2. 我不希望用户检查和取消选中。这意味着应该禁用复选框。

我如何使用之前共享的Codepen示例来实现这一点。任何帮助将不胜感激。

Answer 1

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

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

Working Codepen

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">

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

灰色复选框

只需使用<input>这样的属性disabled停用<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;
      }
    }    
}