How to show images on checked Checkbox from list?

ionic-v1
1

Hello Sir,
I have a list of image .On checked any chekbox it show image in specific position. Here is the list

image

But I want to make this like that…
image

Here is my controller code
$scope.burgerItems22 = [
{id:1, src:‘img/burger/slice_bread.png’, “show”: false,checked : false}
{id:2, src:‘img/burger/sj-burger-patty.png’, “show”: false,checked : false},
{id:3, src:‘img/burger/latus.png’, “show”: false,checked : false},
{id:4, src:‘img/burger/chess_slice.png’, “show”: false,checked : false},
{id:5, src:‘img/burger/bacon1.png’,“show”: false,checked : false},
{id:6, src:‘img/burger/top_bread.png’,“show”: false,checked : false}
]

Here is my html code

   <-div class="item-accordion"  ng-repeat="item in burgerItems22"   >
   <-ion-checkbox   ng-model="item.checked" ng-change="radioValue(item)" ng-value="burger.id" >
        
       <i-mg src= {{item.src}}  width="50px" height="25px">   
        </ion-checkbox>
 <-/div>

On checked it show images and on unchecked it does not show.That means Checked checkbox image shows only . Here create images

        <-div class="col">       
      <-div class="list card"> 
     <-div class="item item-avatar list-card-last-child"> 
       
            <-div  ng-repeat="item in burgerItems" >
             <-img src= {{item.src}}  >    
            <-/div>
          
           <-/div>
           <-/div>
    
  <-/div>

Please help me–

2

In the JSON the parameter checked has to have the “” in other words “checked”:false

3

Hello bandtio,
Thanks for reply

In my json reson I also used “checked”:false. I have used bellow .
Like that
$scope.burgerItems = [

{id:1, style:'position: absolute;left: 0px;bottom: -30px;width: 100px;height: 100px;', src:'img/burger/01.png', "show": false,checked : false},
{id:2, style:'position: absolute;left: 0px;bottom: -20px;width: 100px;height: 100px;', src:'img/burger/02-2.png', "show": false,checked : false},
{id:3, style:'position: absolute;left: 0px;bottom: -17px;width: 100px;height: 100px;', src:'img/burger/03.png', "show": false,checked : false},
{id:4, style:'position: absolute;left: 0px;bottom: -10px;width: 100px;height: 100px;', src:'img/burger/04.png',"show": false,checked : false},
{id:5, style:'position: absolute;left: 0px;bottom: -3px;width: 100px;height: 100px;', src:'img/burger/05.png',"show": false,checked : false}

]

But when i unchecked in the middle.Then it not merge it remain like that
image

In Html Page , I have used below…
<-div ng-repeat=“item in burgerItems” ng-show=“item.show”>
<-img src= {{item.src}} style={{item.style}} >
<-/div>

Please suggest me to how to merger it if unchecked in the middle of the list…

4

I still see it as checked not “checked”. Maybe it is an issue with the forum…

Why don’t you use and *ngIf so when some of the parameters are checked it shows a different pic.

Example

interface value {
name:string;
checked:boolean
}

var p:value[] = [{“name”:“image1”, “checked”:true},{“name”:“image2”, “checked”:false},{“name”:“image3”, “checked”:true} ];

<div *ngFor="#value of value">
<p>*ngIf="value.checked == true && value.name='image1' && value.name == 'image2'">Show me image1 and image2!!!</p>
<p>*ngIf="value.checked == true && value.name='image3' && value.name == 'image2'">Show me image3 and image2!!!</p>
<p>*ngIf="value.checked == true && value.name='image3' && value.name == 'image1'">Show me image3 and image2!!!</p>
</div>

Where in this case it will never show image1 and image2 because image2 is false. Now if you do that with your pics it might do the same thing.