Angular.js如何将单选按钮功能替换为类名item的div点击实现

解决方案 #

第一步：调整控制器代码 #

给vm添加初始选中值，和你原来默认选中1.5的逻辑保持一致，避免页面加载时没有默认展示内容：

let vm = $scope
// 初始默认选中1.5版本，需要默认选1.0就把值改为oneZero即可
vm.color = 'oneFive'

vm.isShown = function (color) {
  return color === vm.color;
};

第二步：修改HTML代码 #

删除所有单选按钮input元素，给类名为item的div添加点击事件绑定，还可以额外加动态类名实现选中态视觉效果：

<div class="item" ng-click="vm.color = 'oneZero'" ng-class="{'active': isShown('oneZero')}">
  <span class="group-name">
    <p>PHASE 1.0</p>
    Closed API Data Market
  </span>
  1.0
</div>
<div class="item" ng-click="vm.color = 'oneFive'" ng-class="{'active': isShown('oneFive')}">
  <span class="group-name">
    <p>PHASE 1.5</p>
    Open API Data Market
  </span>
  1.5<br />
</div>

<br />
<div class="servicePreparing" ng-show="isShown('oneZero')">
  <img src="assets/img/serviceStop.jpg" />
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
<!-- 此处保留你原本1.5版本对应的内容代码 -->
</div>

可选补充：添加选中态样式 #

你可以在CSS中补充.active类的样式，方便用户识别当前选中的阶段：

.item.active {
  border: 2px solid #2196f3;
  background-color: #e3f2fd;
  cursor: pointer;
}
.item {
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者KYUN