如何在Ionic 2中设置单选按钮警报的值

时间:2017-09-16 06:21:15

标签: angular typescript ionic2 alert ionic3

我的单选按钮提醒包含超过12个选项,我想检查等于我的变量值的选项。

我使用if语句用少于4个选项做这个事情。但是现在我有超过12个选项,所以我希望有更简单的方法来检查我的变量的值并选择相等的选项。

--- ---编辑

这是我html的一部分

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

.ts功能(我想要一种更好的方法来选择警报的无线电按钮(如果有的话)

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

1 个答案:

答案 0 :(得分:3)

是的,有一种简单的方法可以做到这一点。您可以在import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Spinner; import android.widget.TextView; import java.util.ArrayList; public class TestCode extends AppCompatActivity { Spinner spinner; TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test_code); textView = (TextView) findViewById(R.id.text); spinner = (Spinner) findViewById(R.id.spinner); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_dropdown_item, new String[]{"String 1", "String 2", "String 3", "String 4", "String 5"}); spinner.setAdapter(adapter); spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) { String s = spinner.getSelectedItem().toString(); textView.append(s); } @Override public void onNothingSelected(AdapterView<?> parentView) { // your code here } }); } } 属性中添加条件,如下所示:

checked

修改

通过使用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(); } 循环和包含所有颜色的数组,还有一种更好的方法来添加所有颜色:

forEach