ion-list with checkbox disable in ionic framework

Question

Here is my Codepen .

In this demo application I have two list arrays. One is items and second is items1 .

I want to:

1. show list as such that where some items from items array should be pre-checked which are in items1 .
2. I do not want user to check and uncheck. So that means checkbox should be disabled.

How can I do that with the demo Codepen I shared earlier. Any help would be appreciated.

Answer 1

I'd suggest you to ng-init to set the value of item.checked on input init

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

Working Codepen

Answer 2

Depending on how dynamically you want to set the pre-checked items you can do one of the following.

Disable user-click

Depending whether you want that grey or blue checkbox you either do

Blue checkbox

change

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

to

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

Basically removing the click function that will set a checked value for the item.

Grey checkbox

Just disable the <input> element using the attribute disabled like this <input type="checkbox" disabled>

Case 1: your items always stays the same (you create the items)

For each matching item in $scope.items and $scope.items1 you add a key called checked:true to the matching items. In your case that would be to create the arrays as following

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

Case 2: dynamically find matching items based on their 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;
      }
    }    
}