Dartlang: Create table rows with different number of radio buttons

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