CODEWITHSUNDEEP
htmlangularjsradio-buttonangularjs-ng-repeatangularjs-controller
gavask
gavask

Reputation: 97

Radio button select reflects in second group radio button in ng-repeat

I need a four radio button. First iteration generates 2 radio button & second iteration generates 2 radio button. If i select one of the Radio button in first section , then one of the radio button in second selection is also selected. I want two section containing 2 radio button each which dont reflect the changes on each other. Any help pls

 <div ng-controller="MainCtrl" >
    <div data-ng-repeat="choic in choice"  >
    <form >
  <input ng-model="parent.mustShow"  class="label_align" type="radio"          name="customer" value="no"  ><div class="mediumSubhead"> Information housed         </div><br/>
   <input ng-model="parent.mustShow"  class="label_align" type="radio"   name="customer" value="yes" >
 <div class="mediumSubhead"> Information housed   outside </div></form>
</div> 
 </div>
Controller.js
 var app = angular.module('EquityCompensation', []);
 app.controller('MainCtrl', function($scope) {
 $scope.choice = [{id: 'choic1'},{id: 'choic2'}];
 });

Upvotes: 1

Views: 461

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

I'd suggest you to put the mustShow variable inside the choice array. So that would help you make the track of the each element. That will make your ng-model declaration to ng-model="choic.mustShow"

And to show the outer input element you could use filter over there that will check that any of the choice has mustShow option is ticked then you show the input element.

Markup

<div data-ng-repeat="choic in choice">
  <form>
    <input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
    <div class="mediumSubhead"> Information housed </div>
    <br/>
    <input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
    <div class="mediumSubhead"> Information housed outside </div>
  </form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
  <input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>

Demo Plunkr

Upvotes: 1

Related Questions