如何将单选按钮更改为 div?

How can I change radio buttons to div?

我完全是 Angular.js 的新手,我从某人那里得到了要修复的文件。 所以问题是我真的想通过单击按钮更改 div,所以我尝试搜索它并找到了带有单选按钮的解决方案,但我想单击的是 div. 所以这是我的代码:

        
  let vm = $scope
    vm.isShown = function (color) {
    return color === vm.color;
  };
  
  //this is the function in a controller 
 <div class="item">
            <span class="group-name"
              ><p>PHASE 1.0</p>
              Closed API Data Market</span
            >

            <input type="radio" ng-model="color" value="oneZero" /> 1.0
          </div>
          <div class="item">
            <span class="group-name"
              ><p>PHASE 1.5</p>
              Open API Data Market</span
            >
            <input
              type="radio"
              ng-model="color"
              value="oneFive"
              checked="checked"
            />
            1.5<br />
          </div>
        </div>
      </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')">

我想删除输入并想用 div as class name as 'item'

单击

你可以在这里看到一个例子:https://plnkr.co/edit/flMIhl6ugNUNXwpE

此外,您要做的是设置一个变量(在单选按钮中是 color),因此在您的 AngularJS 控制器中:

vm.color = '';

并在两个 div 中使用 ng-click 设置该值,在您看来,您将具有特定值:

<div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
  One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
  One Five Image Showed
</div>