Angular JS：单击单选按钮时可见性可见

时间：2016-12-20 06:32:36

标签： javascript html angularjs

我有两个单选按钮，两个文本框和一个按钮。

当我点击第一个按钮时，只会出现一个文本框，当我点击第二个按钮时，会出现两个文本框。

但是我想用 visibility：hidden | visible 属性来实现，因为我希望将按钮位置固定在两个文本框下面。

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="basic_info_radio_toggle">
            <label class="one">
                <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                <span>One</span></label>
            <label class="two">
                <input type="radio" name="registration_options" ng-click="option='two'">
                <span>Two</span></label>

        </div>
    </div>
</div>

<div class="form-group" ng-show="option ==='two'">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <form role="form">
            <div class="form-group set_margin_0 set_padding_0">
                <label>Button</label>
                <input class="form-control" placeholder="Enter Button Name" type="text">
            </div>
        </form>
    </div>
</div>
<div class="form-group" ng-show="option ==='two' || option === 'one'">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <span>Link</span>
        <input class="form-control" placeholder="http://" type="text">
    </div>
</div>


<div class="form-group">
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
        <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

    </div>
</div>

谢谢。

4 个答案:

答案 0 :(得分：1)

尝试ng-style指令：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
    <script>
        var app = angular.module("TestApp", []);
        app.controller("myCtrl", function () {            
        });
    </script>
    <div ng-app="TestApp" ng-controller="myCtrl">
        <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                <div class="basic_info_radio_toggle">
                    <label class="one">
                        <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                        <span>One</span></label>
                    <label class="two">
                        <input type="radio" name="registration_options" ng-click="option='two'">
                        <span>Two</span></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                <form role="form">
                    <div class="form-group set_margin_0 set_padding_0">
                        <label>Button</label>
                        <input class="form-control" placeholder="Enter Button Name" type="text">
                    </div>
                </form>
            </div>
        </div>
        <div class="form-group" ng-style="{visibility: option == 'two' ? 'visible' : 'hidden'}">
            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                <span>Link</span>
                <input class="form-control" placeholder="http://" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
                <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
            </div>
        </div>
    </div>
</body>
</html>

答案 1 :(得分：0)

请尝试使用函数而不是使用内联定义。此外，我更愿意使用ng-if而不是ng-show，因为如果条件错误，ng-if将阻止呈现HTML模板。请尝试以下代码段。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>

<script>
    var app = angular.module("TestApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.setVisibility = function(val){
            var resultVal = (val == 'one')? 'one' : 'other';
            $scope.option = resultVal;
        }
    });
</script>

<div ng-app="TestApp" ng-controller="myCtrl">
    <div class="form-group">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
            <div class="basic_info_radio_toggle">
                <label class="one">
                    <input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'">
                    <span>One</span></label>
                <label class="two">
                    <input type="radio" name="registration_options" ng-click="setVisibility('two')">
                    <span>Two</span></label>

            </div>
        </div>
    </div>

    <div class="form-group" ng-if="option ==='other'">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
            <form role="form">
                <div class="form-group set_margin_0 set_padding_0">
                    <label>Button</label>
                    <input class="form-control" placeholder="Enter Button Name" type="text">
                </div>
            </form>
        </div>
    </div>
    <div class="form-group" ng-if="option ==='other' || option === 'one'">
        <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
            <span>Link</span>
            <input class="form-control" placeholder="http://" type="text">
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
            <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

        </div>
    </div>
</div>


</body>

</html>

答案 2 :(得分：0)

我没有看到你初始化了你的角度应用程序。

试试这个：

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script>
 angular.module("MyApp", []); //angular app
</script>

<div ng-app="MyApp">

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <div class="basic_info_radio_toggle">
            <label class="one">
                <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
                <span>One</span></label>
            <label class="two">
                <input type="radio" name="registration_options" ng-click="option='two'">
                <span>Two</span></label>

        </div>
    </div>
</div>

<div class="form-group">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <form role="form">
            <div class="form-group set_margin_0 set_padding_0">
                <label>Button</label>
                <input class="form-control" placeholder="Enter Button Name" type="text">
            </div>
        </form>
    </div>
</div>
<div class="form-group" ng-class="{'invisible':option =='one'}">
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
        <span>Link</span>
        <input class="form-control" placeholder="http://" type="text">
    </div>
</div>

<div class="form-group">
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
        <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

    </div>
</div>
</div>

答案 3 :(得分：0)

您可以使用ng-class

尝试此操作

CSS 

<style>
 .visibleOff{visibility: hidden;}
</style>

HTML 

<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
    <div class="basic_info_radio_toggle">
        <label class="one">
            <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
            <span>One</span></label>
        <label class="two">
            <input type="radio" name="registration_options" ng-click="option='two'">
            <span>Two</span></label>

    </div>
   </div>
</div>

 <div class="form-group" >
 <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
    <form role="form">
        <div class="form-group set_margin_0 set_padding_0">
            <label>Button</label>
            <input class="form-control" placeholder="Enter Button Name" type="text">
        </div>
      </form>
    </div>
 </div>
 <div class="form-group" ng-class="{'visibleOff': option == 'one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
    <span>Link</span>
    <input class="form-control" placeholder="http://" type="text">
</div>
 </div>


 <div class="form-group">
  <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
    <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>

   </div>
</div>
相关问题
最新问题