angularjs - 在 AngularJS 中，如何使 li 或任何其他元素的行为方式与单击事件上的单选按钮相同？

Question

这是我有单选按钮的代码：

<ul id="chartType" >
        <li class="thumbnail">
          <label>
            <input type="radio" value='AreaChart' ng-model="chart.type" />
            <img src="images/area.png">
          </label>
        </li>
        <li class="thumbnail">
          <label>
            <input type="radio" value='PieChart' ng-model="chart.type" />
            <img src="images/pie.png">
          </label>
        </li>
        <li class="thumbnail">
          <label>
            <input type="radio" value='ColumnChart' ng-model="chart.type" />
            <img src="images/column.png" >
          </label>
        </li>
</ul>

我想要的是这样的（即，当用户点击li或img时，它的工作方式与上面的代码相同）：

<ul id="chartType" >
        <li class="thumbnail">
            <img src="images/area.png">
        </li>
        <li class="thumbnail">
            <img src="images/pie.png">
        </li>
        <li class="thumbnail">
            <img src="images/column.png" >
        </li>
</ul>

Answer 1

我发现这样做的一种方法是保留单选按钮，但只需删除 CSS 中的单选按钮圆圈，如下所示：

input[type="radio"] {
  display: none;
}

Answer 2

您应该为此编写自己的指令，单击它们后将重新编译元素的 dom。