Disable list element on specifice condition

 <ion-col col-9>
        <ion-list>
          <!-- ng-Disabled="customer.lsl_job_status=='Completed'" ng-Click="measurementEntry(customer.lsl_lsh_sys_id , customer.lsl_sys_id ,customer.lsl_comp_code)" -->
          <ion-item ng-if="customer.lsl_job_status=='Completed'" (click)="measurementEntry(customer.lsl_sys_id ,customer.lsl_comp_code)" >
            <h1>{{customer.lsl_contact_person}}, SC_L: {{customer.lsl_sys_id }}</h1>
            <h2>Contact No : {{customer.lsl_contact_no}} Company: {{customer.lsl_comp_code}}</h2>
          </ion-item>
        </ion-list>
      </ion-col>

How to disable a list element when customer.lsl_job_status is completed. ??

<ion-col col-9>
   <ion-list>   

      <ion-item ng-if="customer.lsl_job_status=='Completed'" class="disabled" >
          <h1>{{customer.lsl_contact_person}}, SC_L: {{customer.lsl_sys_id }}</h1>
          <h2>Contact No : {{customer.lsl_contact_no}} Company: {{customer.lsl_comp_code}}</h2>
       </ion-item>

       <ion-item ng-if="customer.lsl_job_status!='Completed'" (click)="measurementEntry(customer.lsl_sys_id ,customer.lsl_comp_code)" >
          <h1>{{customer.lsl_contact_person}}, SC_L: {{customer.lsl_sys_id }}</h1>
          <h2>Contact No : {{customer.lsl_contact_no}} Company: {{customer.lsl_comp_code}}</h2>
       </ion-item>

   </ion-list>
</ion-col>

css

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

2 Likes