Angular.js Show DIV when radio-input is checked

Question

I want to show a div when a input-radio is selected.

<div>
  <div class="radio c-radio">
    <label>
      <input type="radio" name="specialType" ng-model="vm.specialType.closed" />
      <span class="fa fa-check"></span>First Radio
    </label>
  </div>
  <div ng-show="vm.specialType.closed">
    <label>Day: </label>
    <input type="date" class="form-control" />
  </div>
</div>

I have 4 radio inputs like this one. I want to show & hide each one when one is checked. I tried with ng-click='someFunction()' but it's not working, anyway I dont think it's the best way to do it.

If I check the first radio, and for example, 3rd is checked, I want to hide the one shown and show the first one.

My controller has this variable. My idea was use it for true/false (show/hide) But maybe there is a beautiful and clean solution.

vm.specialType = {
  closed: false,        //1st radio
  open: false,          //2nd radio
  ownGuards: false,     //3rd radio
  foreignGuards: false  //4th radio
};

Ok, but now what? I used to show/hide some divs with ng-click() but now I cant. Maybe something like ng-checked or similar? I dont know — Baumannzone
– Baumannzone, Commented Dec 14, 2015 at 17:29
You should update the post with the rest of the html, the problem might be in the other radio buttons, because this looks fine. Are you sure you are using the same input name for all the radios? — Bata
– Bata, Commented Dec 14, 2015 at 17:34
Im just testing whit the 1st radio. Others dont have ng-show atr. — Baumannzone
– Baumannzone, Commented Dec 14, 2015 at 18:49

Aᴍɪʀ · Accepted Answer · 2015-12-14 19:01:28Z

If you want to only show one div at a time, you could have just one variable telling you which div should be displayed. In that case you only need one model.

For each div, compare the div number with the value of the model to see if you need to show the div. Each radio button, will assign its own value to the model.

  <div>
    <div ng-show="vm.which==1"><h1>1</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="1" />
  </div>
  <div>
    <div ng-show="vm.which==2"><h1>2</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="2" />
  </div>
  <div>
    <div ng-show="vm.which==3"><h1>3</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="3" />
  </div>
  <div>
    <div ng-show="vm.which==4"><h1>4</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="4" />
  </div>

I've created this plnkr, you can see the code there as well.

I just created it with four divs, I believe the best practice is to use arrays and ng-repeat to do the work if those divs have something in common.

Collectives™ on Stack Overflow

Angular.js Show DIV when radio-input is checked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related