AngularJS : Hide and show radio button

Question

<div class="filter_hide">
    <div ng-cloak ng-repeat="web in website" >
        <label ng-show="filter[web.websiteId]"><input type="radio" id="{{web.websiteId}}" ng-checked="webCheck" id="{{web.websiteId}}" value="{{web.websiteId}}" name="webname"  ng-model="filter[web.websiteId]" />{{web.websiteName}} ({{web.couponCount}})</label>                                           
     </div>
</div>
<div class="filter_show">
    <div class="check_box" ng-hide="filter[web.websiteId]"  ng-repeat="web in website">                                                 
    <label><input type="radio" value="{{web.websiteId}}" ng-checked="webCheck" id="{{web.websiteId}}" name="webname" ng-click="webcall(web)" ng-model="filter[web.websiteId]" />{{web.websiteName}} ({{web.couponCount}})</label>                                                   
    </div>
</div>

I am trying to make when some one click on radio button form "filter_show" div then need to hide form there and show on "filter_hide" div and if user again click another radio button form "filter_show" div then need to hide previously select radio button form "filter_hide" div and show new one there. I am using angular js 1.2.17

my controller -

app.controller('myCtrl', function ($scope, $http) {  
    $http({method: 'GET', url: '/asasa/asa/'}).success(function(data) {        
        $scope.website = data.websites;
        $scope.onlinedata = data.coupons;
        $scope.restdata = $scope.onlinedata;
        $scope.webcall = function (web) {       
            $http({method: 'GET',url: '/asas/cccc/asas?websiteId='+web.websiteId}).success(function(data) {
                $scope.onlinedata = data.coupons;                      
            });                  
        };

Can you link to your controller code and hopefully create a plunker? — Ronald91

BlaShadow BlaShadow · Accepted Answer · 2014-08-07T20:50:18

Take a look a this example

fiddle Example

<div ng-app>
    <div ng-controller='contorller'>

        <div class='to_hide' ng-if='hide === true'>
            <input type="radio" name='hide' ng-click="showElement('show')" />Hide<br>    
            <input type="radio" name='hide' ng-click="showElement('show')" />Hide<br>        
        </div>

        <br>

        <div clas='to_show' ng-if='hide === false'>
            <input type="radio" name='show' ng-click="showElement('hide')" />Show</br>    
            <input type="radio" name='show' ng-click="showElement('hide')" />Show</br>   
        </div>
    </div>

</div>


<script>

    function contorller($scope){

        $scope.hide = true;

        $scope.showElement = function(value){
            if(value === 'hide'){
                $scope.hide = true;
            }else{
                $scope.hide = false;
            }
        }
    }

</script>

AngularJS : Hide and show radio button

1 Answers