在離子框架中禁用復選框的離子列表

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;
      }
    }    
}