How can I change radio buttons to div?-CodePudding

I'm absolutely new to Angular.js, I got the file from someone to fix. So the question is that I really want to change the div with clicking buttons, so I tried to search of it and i found the solution with radio button, but the thing is what i want to click is div. So here is my code :

        
  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')">

I want to remove the inputs and want to click with div as class name as 'item'

CodePudding user response：

You can see one example lives here: https://plnkr.co/edit/flMIhl6ugNUNXwpE

Also, what you have to do is set one variable (In the radio buttons were color), so in your AngularJS controller:

vm.color = '';

And set that value with ng-click in both divs, with the specific value, in your view you will have:

<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>