radio-button - Dartlang:使用不同数量的单选按钮创建表行

Question

我是Web编程的新手，直到现在，我只创建带有仅具有一个单选按钮或复选框等行的表。但是现在，我必须创建一个包含不同数目的单选按钮的行的表。我的表只有2列。第一列将包含行的指示符名称。第二列将包含单选按钮。那么我如何创建一个包含多个单选按钮的单元格。某行将有10个或更多的单选按钮，因此没有人愿意一个接一个地附加10个单选按钮，对吗？

编辑:我这样创建它:

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

那么有没有更简单的方法可以做到这一点？特别是对于我创建的列表，假设还会有其他值，例如性别，类型等...？
另外我还有一个小问题。我在单选输入元素上尝试了onSelect，onClick，但没有成功。我只是用x = x + 10之类的东西进行测试，因此刚从onSelect.listen函数中删除了该代码。

Answer 1

您可以做的是为得分创建一张 map :

Map scores = {
  'university': score3,
  'gpa':, score5,
  'language: score5,
  'essay: score5,
  'success': score10,
  'fabric': score10
};

您的 createRadioButtons可以简化为

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

对于更改通知，您可以使用 onClick或 onChange http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php