Select multiple radio options in angularjs issue

Question

I want to select multiple radio options.New to angularjs.

Steps to produce the issue:

Select any country from the 1st select menu -> Choose Reason A
Select any country from the 2nd select menu -> Choose Reason C

here the above Reason A option disappears and only Reason C is selected. i want to hold the two different reasons for different countries section.

here is the fiddle http://jsfiddle.net/Lini7/knfsv64m/8/

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
    console.log("print the notin value from data",this.item.noTin);
    if (!this.item.country) return false;
    var selectedCountry = this.item.country.country.toLowerCase();
    var fourCountries = ["cayman islands", "albania"]
    var isIt = fourCountries.indexOf(selectedCountry) >= 0;
    console.log("print match country val",isIt);
    console.log("get checknotin value before assign",checkNoTin);
    if (checkNoTin) this.item.noTin = true;
    console.log("final checknotin val",checkNoTin);
    return isIt;
  }
});

and the view

<body>
<div ng-app="myApp">
  <div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
  <label class="checkbox">
    <input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
  </label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
  <div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
    <div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
      <label class="radio-button">
        <input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
      </label>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
          <label class="item item-input input-margin">
            <textarea  ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
          </label>
        </label>
      </div>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
        </label>
      </div>
    </div>
  </div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
  <label class="checkbox">
    <input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
  </label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
  <div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
    <div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
      <label class="radio-button">
        <input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
      </label>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
          <label class="item item-input input-margin">
            <textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
          </label>
        </label>
      </div>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
        </label>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</body>

You want to select multiple radio options or set default checkbox and radio button on page load? Could you elaborate the issue you are facing? — Saravanan Sachi, Mar 13 '17 at 03:50
what do you want actually ?? and your requirement is not clear @Lini — Abdullah Al Noman, Mar 13 '17 at 04:11
@BOSS i have separate radio buttons for each country selection. How to select radio buttons in each section. Currently am able to select only one radio button — Shalini, Mar 13 '17 at 04:20
@Lini You specified all the radio buttons with same name "reason". To select multiple radio buttons, use different name. Using the same names, groups the radio button into one. — Saravanan Sachi, Mar 13 '17 at 04:27
You are correct. can you provide the sample example. I am new to angularjs and am hard to find this in angularjs — Shalini, Mar 13 '17 at 06:01

score 1 · Answer 1 · edited May 23 '17 at 12:09

1

To make some input as hidden you can use

<p ng-show="condition">I'm shown</p>

and this condition value should be initialized in the scope of your controller

$scope.condition=true/false

to hide an show input you can use ng-if. Its better to use ng-if for dynamic inputs . see details here

Now for your case you can use item.reason in the condition to show and hide your input .

<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />

edited May 23 '17 at 12:09

Community

1
1

answered Mar 13 '17 at 04:24

Abdullah Al Noman

2,817
4
20
35

@Lini see my answer this might help you – Abdullah Al Noman Mar 13 '17 at 04:33
my issue is only one radio button is selected. In the second country list i have the same reason options to select but if i select any one the first country option disappears. i want to hold the two reasons for different countries. – Shalini Mar 13 '17 at 06:00
you should rename the model then giving same model will not work – Abdullah Al Noman Mar 13 '17 at 06:04
renaming the model for what? i do not want the solution to hide my radio button. I want to know how to make group of radio buttons and select one from each country section http://jsfiddle.net/Lini7/knfsv64m/10/ latest fiddle – Shalini Mar 13 '17 at 06:15
yeah now I got you.. I would suggest you post two or three question for each of your problem .. :) .. so that its clear still the question is broad – Abdullah Al Noman Mar 13 '17 at 06:19
you should not change your question time after time :) .. its not expected that people will answer your question then you will change it :( which will make the answers and efforts invalid :( – Abdullah Al Noman Mar 13 '17 at 06:47
Thanks for your comments. by this time i can learn the angularjs from classroom instead of just seeing your comments not the solutions – Shalini Mar 13 '17 at 06:55

score 0 · Answer 2 · answered Mar 13 '17 at 08:30

0

Finally got the solution

I just added the radio button name with index then it worked which will give different names for each group of buttons.

name='reason_{{$index}}'

answered Mar 13 '17 at 08:30

Shalini

219
1
5
16

Select multiple radio options in angularjs issue

2 Answers2