AngularJS:隐藏和显示单选按钮

时间:2014-08-07 15:14:10

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

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

1 个答案:

答案 0 :(得分:0)

看看这个例子小提琴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>