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

Question

我对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作为类名作为'item'

Answer 1

您可以在这里看到一个示例: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>