Dartlang: Create table rows with different number of radio buttons - radio-button

Question

I'm new to web programming and until now i was just creating table with rows which have only one radio button or checkbox etc... But now i have to create a table with rows containing different number of radio buttons. My table has only 2 columns. First column will contain indicator names of rows. Second column will contain radio buttons. So how can i create a cell containing multiple radio buttons. Some row would have 10 or more radio buttons so no one would want to append 10 radio buttons one after another, right?
Edit: I created it like this:
List anketScoreList = [{'id': 'university','text': 'University Score'},
{'id': 'gpa', 'text': 'GPA Score'},
{'id': 'language', 'text': 'Language Score'},
{'id': 'success', 'text': 'Success Score'},
{'id': 'fabric', 'text': 'Fabric Score'},
{'id': 'essay', 'text': 'Essay Score'}];
//Radio values
List score3 = ["1", "1.5", "2"];
List score5 = ["1", "2", "3", "4", "5"];
List score10 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
//creating table body
anketScoreList.forEach((a) {
index += 1;
tbody.append(new Element.tr()
..append(new TableCellElement()..text = index.toString())
..append(new TableCellElement()..append(new LabelElement()
..text = a['text']
..setAttribute('for', a['id'])))
..append(createRadioButtons(a)));
});
Element createRadioButtons(metadata){
List m;
if(metadata['id'] == "university"){
m = score3;
} else if(metadata['id'] == "gpa" || metadata['id'] == "language" ||
metadata['id'] == "essay"){
m = score5;
} else if(metadata['id'] == "success" || metadata['id'] == "fabric"){
m = score10;
}
var td = new TableCellElement();
m.forEach((score){
td.append(new InputElement()
..type = "radio"
..id = metadata['id']
..value = score
..name = metadata['id']
..classes.add("radio")
..onSelect.listen((e){
})
);
});
return td;
}
So is there any easier way to do this? Specially for the lists that i created, assuming there will be other values like genders, types etc... ?
In addition i have another little question. I tried onSelect, onClick on my radio input element but it didn't work. I was just testing with something like x = x + 10 so just removed that code from my onSelect.listen function.

Answer 1

What you could do is create a map for the scores:
Map scores = {
'university': score3,
'gpa':, score5,
'language: score5,
'essay: score5,
'success': score10,
'fabric': score10
};
your createRadioButtons could the be simplified to
Element createRadioButtons(metadata){
// or use a switch
//
// List m;
// switch(metadata['id']) {
// case 'university':
// m = score3;
// break;
// case 'gpa':
// case 'language':
// case 'essay':
// m = score5;
// break;
// case 'success':
// case 'fabric':
// m = score10;
// break;
// }
var td = new TableCellElement();
//m.forEach((score) {
scores[metadata['id']].forEach((score){
td.append(new InputElement()
..type = "radio"
..id = metadata['id']
..value = score
..name = metadata['id']
..classes.add("radio")
..onSelect.listen((e){
})
);
});
return td;
}
For change notification you can use onClick or onChange
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php