ng-hide and ng-show not working on radio click

Question

I have 2 radio button and 2 view to be shown on selection of each

<input  class="inptFileRadio"  type="radio" name="test" value="1" checked><span> one</span>
<input  class="inptFileRadio" type="radio" name="test" value="2"> <span>two Files</span>

My view

<div ng-show="diaplyOne"> This is one and default shown </div>
<div ng-show="diaplyTwo"> This is two and shown on click of 2</div>

In my controller:

 $scope.diaplyOne= true;  // Intially this div will be shown
 $scope.diaplyTwo= false; // Initially this is hidden 


$('input:radio[name="test"]').change(
function(){

    if (this.checked && this.value == '2') {
        $scope.diaplyOne= false; // displayone div should be hidden with this 
        $scope.diaplyTwo= true;

    }
});

But this is not working for Radio as same code working for me for popup close button. Is there any clues ? Thanks

Answer 1

You don't need any thing from jQuery you already have a big library (angularjs) with a lot of options, this sample show to you how to use codes with little option of this framework

var app = angular.module("app", [])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="display = 1">

<input  class="inptFileRadio"  type="radio" name="test" ng-model="display" ng-value="1"><span>1</span>
<input  class="inptFileRadio" type="radio" name="test"  ng-model="display" ng-value="2"> <span>2</span>
<input  class="inptFileRadio" type="radio" name="test"  ng-model="display" ng-value="3"> <span>3</span>

<div ng-show="display === 1"> This is one and default shown </div>
<div ng-show="display === 2"> This is two and shown on click of 2</div>
<div ng-show="display === 3"> This is two and shown on click of 3</div>

</div>