Question

我所拥有的是一个使用表格从我的对象中发送信息的流星应用程序。我使用空格键{{#each}}来运行对象并显示表格行。除了显示单选按钮外，这一切都很有效。它似乎认为所有这些都是一个大组的一部分，只允许选择一个而不是每个表行一个。

我尝试了一些不同的东西，但无法让每一行独立于另一行。

有关如何使用模板中的{{#each}}处理流星中的单选按钮的任何想法。图下面的问题。

<p>

Answer 1

您可以在模板的js文件中创建一个帮助程序，以检查当前值是否等于单选按钮数组的当前元素并检查它：

Template.hello.helpers({
    isChecked: function(currentValue, value) {
        return currentValue === value ? 'checked' : '';
    } 
});

在您的模板中，您可以使用帮助程序进行检查，或者不使用单选按钮：

<template name="hello">
  <td>
    {{#each exampleData}}
      <input {{isChecked exampleDataItem this}} value="{{this}}" name="orderWaChargeAddSub{{this}}" type="radio">
    {{/each}}
  </td>
</template>

您遇到的问题是您使用相同的名称对单选按钮进行分组，您必须为每组单选按钮使用不同的名称。例如：

<tr>
                <td>
                    <input class="form-control box-size clearForm" type="text" name="orderChargeDescription" placeholder="Charges"  />
                </td>
                <td>
                    <input type="radio" name="group1" value="ADD" checked>C
                    <input type="radio" name="group1" value="SUB">U
                </td>
                <td>
                    <button type="submit"  name="orderDispUp"  class="btn btn-warning button-height-lp"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
                    <button type="submit"  name="orderDispDn"  class="btn btn-danger button-height-lp"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="form-control box-size clearForm" type="text" name="orderChargeDescription" placeholder="Charges"  />
                </td>
                <td>
                    <input type="radio" name="group2" value="ADD" checked>C
                    <input type="radio" name="group2" value="SUB">U
                </td>
                <td>
                    <button type="submit"  name="orderDispUp"  class="btn btn-warning button-height-lp"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
                    <button type="submit"  name="orderDispDn"  class="btn btn-danger button-height-lp"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                </td>
             </tr>

Meteor - Radio Button Group对多个记录只有一个选择

1 个答案: