如何在列表中放置单选按钮

Question

我试图在我的每个列表元素上放一个单选按钮，就像你在这里看到的。

<ul class="list-group">
  <li class="list-group-item" ng-repeat="player in vm.players">
        {{player.name}}
      <span class="pull-right">
        <input type="radio" name="gender"value="player.name">
      </span>
  </li>
</ul>

我希望基本上能显示球员的名字列表，你可以选择一些单选按钮，但他们似乎不允许你点击他们。

谢谢,

Answer 1

正如@Dimodi所建议的，如果您希望将文本与复选框或单选按钮等可单击的表单输入相关联，则必须使用<label>将它们关联起来。例如:

<label><input...> some text</label>
<input id="foo"...> <label for="foo">some text</label>

Answer 2

为属性绑定标签和单选id。或简单地把收音机放在特定的标签内。

<ul class="list-group">
  <li class="list-group-item" ng-repeat="player in vm.players">
    <label>  {{player.name}}
      <input type="radio" name="gender"value="player.name">
      </label>
      <label for="plys">  {{player.name}}  </label>
        <input type="radio" id="plys" name="gender"value="player.name">
    </li>
 </ul>