AngularJS：隐藏和显示单选按钮答案

【问题标题】：AngularJS : Hide and show radio buttonAngularJS：隐藏和显示单选按钮
【发布时间】：2015-09-29 21:20:10
【问题描述】：

<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>

我试图让当有人点击单选按钮表单“filter_show”div然后需要隐藏表单并显示在“filter_hide”div上，如果用户再次点击另一个单选按钮表单“filter_show”div然后需要隐藏以前选择单选按钮表单“filter_hide” div 并在那里显示新的。我正在使用角度 js 1.2.17

我的控制器 -

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;                      
            });                  
        };

【问题讨论】：

你能链接到你的控制器代码并希望创建一个 plunker 吗？

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

看看这个例子

小提琴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>

【讨论】：