how to toggle between divs using two radio buttons in angularjs

0

Issue

i am trying to use radio button to switch between html divs. On page load i want to select first radio button and respective html div but when i click on other radio button it should show other div and then toggle between divs on click of respective radio buttons

I have tried following solution

    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input radio-inline" type="radio" id="gridRadios1" ng-click="ShowFamilyGroup('YES');">
        Family Group</label>
        <label class="form-check-label">
        <input class="form-check-input radio-inline" type="radio" id="gridRadios2" ng-click="ShowSingle('YES');">
        Single</label>
    </div>

        
<div ng-show="IsFamilyGroupVisible">
        <p>This is family Group</p>   
</div>
<div ng-show="IsSingleVisible">
        <p>This is Individual</p>   
</div>

Here is angular code

$scope.ShowFamilyGroup = function (value) {
       $scope.IsFamilyGroupVisible = value == "YES";
    };

    $scope.ShowSingle = function (value) {
        $scope.IsSingleVisible = value == "YES";
    };

I want on page load FamilyGroup radio button checked and respective div shown and then if user clicks on single other div show hiding family group and vice versa

Solution

Controller Code

$scope.is_family = false;
$scope.is_single = false;
$scope.ShowRadioGroupFn = function (value) {
    if (value) {
         console.log('test');
        $scope.is_family = true;
        $scope.is_single = false;
    } else {
        console.log('test1');
        $scope.is_single = true;
        $scope.is_family = false;
    }
}
$scope.ShowRadioGroupFn(true);

Html Code

<div class="form-check">
<label class="form-check-label">
    <input type="radio" ng-model="is_family" 
           ng-value="true" 
           ng-checked="is_family"
           ng-click="ShowRadioGroupFn(true)">
    Family Group
</label>
<label class="form-check-label">
    <input type="radio" ng-model="is_single" 
           ng-value="true" 
           ng-checked="!is_family"
           ng-click="ShowRadioGroupFn(false)">
    Single
   </label>
 </div>

<div ng-show="is_family">
   <p>This is family Group</p>
</div>
<div ng-show="is_single">
   <p>This is Individual</p>
</div>

Hope fully it will help to you easily.

Answered By – Ankita Dobariya

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More