AngularJS绑定输入和表的各种行为

Question

我有一张桌子和一些复选框和单选按钮。表格的每个单元格都包含如下数据：

<td>
  <div id="Person">John</div>
  <div id="City">Paris</div>
  <div id="FavFood">Cheese</div>
  <div id="Pet">Cat</div>
</td>

复选框＆＃39;名称是：Person，Location，FavFood和Pet（单元格中每个div一个）。可以单击多个复选框，并显示相应的div。与未选中复选框对应的数据将被隐藏。

单选按钮具有相同的名称（单元格中每个div一个）。当选择单选按钮时，表单元格＆＃39;背景颜色取决于相应div中的值。

示例：

复选框：人物和宠物（显示这些div中的数据）

选中单选按钮：Pet（具有相同Pet的单元格将具有相同的颜色。颜色是javascript中数组中预定义的彩虹的7种颜色。它们归于Pets in字母顺序：猫（红色），狗（橙色），鹦鹉（黄色）。

<td style="background-color:red">
  <div id="Person"  style="display:block">John</div>
  <div id="City"    style="display:none">Paris</div>
  <div id="FavFood" style="display:none">Cheese</div>
  <div id="Pet"     style="display:block">Cat</div>
</td>

我目前在javascript中使用onClick实现了这一点，并且通过id和子元素进行了大量的DOM操作。我从API中获取json中的所有数据。

我可以使用AngularJS进行简化吗？