Wie Sie den Wert der Radiobutton-Alarm in Ionic 2

Question

einstellen Ich habe Radiobutton-Warnung, die mehr als 12 Optionen enthalten, und ich möchte die Option überprüfen, die gleich ist als meine Variable Wert.

Ich wurde verwendet, wenn Aussage zu diesem Ding mit weniger als 4 Optionen. Aber jetzt habe ich mehr als 12 Option, also wünsche ich, dass es einfacher ist, den Wert meiner Variablen zu überprüfen und die gleiche Option auszuwählen.

--- edit ---

Dies ist ein Teil meiner html

<button ion-button clear full (click)="selectColor(x.color)">{{x.color}}</button> 

.ts-Funktion (ich ein besserer Weg will die Radiobutton von Alarm wählen (falls vorhanden))

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
alert1.setTitle('Color Theme'); 
    if(color=="red"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Red', 
      value: 'red', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Red', 
      value: 'red', 
     }); 
    } 
    if(color=="pink"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Pink', 
      value: 'pink', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Pink', 
      value: 'pink' 
     }); 
    } 
    if(color=="purple"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Purple', 
      value: 'purple', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Purple', 
      value: 'purple' 
     }); 
    } 
    if(color=="blue"){ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Blue', 
      value: 'blue', 
      checked: true 
     }); 
    }else{ 
     alert1.addInput({ 
      type: 'radio', 
      label: 'Blue', 
      value: 'blue' 
     }); 
    } 
    ... 
alert1.addButton('Cancel'); 
alert1.addButton({ 
    text: 'Okay', 
    handler: data => { 
      ... 
    } 
}); 
alert1.present(); 
} 

Answer 1

Ja, es gibt eine einfache Möglichkeit, das zu tun. Sie können nur den Zustand, in dem checked Eigenschaft wie folgt hinzu:

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
    alert1.setTitle('Color Theme'); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Red', 
     value: 'red', 
     checked: color === "red" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Pink', 
     value: 'pink', 
     checked: color === "pink" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Purple', 
     value: 'purple', 
     checked: color === "purple" 
    }); 

    alert1.addInput({ 
     type: 'radio', 
     label: 'Blue', 
     value: 'blue', 
     checked: color === "blue" 
    }); 

    // ... 

    alert1.addButton('Cancel'); 
    alert1.addButton({ 
     text: 'Okay', 
     handler: data => { 
      // ... 
     } 
    }); 

    alert1.present(); 
} 

EDIT

Es gibt auch eine bessere Möglichkeit, alle Farben hinzufügen, indem Sie eine forEach-Schleife und ein Array mit allen Farben :

selectColor(color){ 
    let alert1 = this.alertCtrl.create(); 
    alert1.setTitle('Color Theme'); 

    // Add the new colors here! 
    const colors = ['Red', 'Pink', 'Purple', 'Blue']; 

    colors.forEach(color => { 
     alert1.addInput({ 
      type: 'radio', 
      label: color, 
      value: color.toLowerCase(), 
      checked: color === color.toLowerCase() 
     }); 
    }); 

    // ... 

    alert1.addButton('Cancel'); 
    alert1.addButton({ 
     text: 'Okay', 
     handler: data => { 
      // ... 
     } 
    }); 

    alert1.present(); 
}