Angular JS：单击单选按钮时可见性可见
[英]Angular JS : visibility visible on click on radio button
问题描述
I have two radio buttons , two textboxes and a button. 
我有两个单选按钮，两个文本框和一个按钮。
When i click on 1st button then only one text box should appear , when i click on second button , two textboxes should appear. 当我点击第一个按钮时，只会出现一个文本框，当我点击第二个按钮时，应该出现两个文本框。
but i want to do it with visibility:hidden|visible property as I want button position to be fixed below two text boxes. 但我想用可见性：隐藏|可见属性，因为我希望按钮位置固定在两个文本框下面。
<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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div>
Thank you. 谢谢。
4 个解决方案
解决方案1
1 已采纳 2016-12-20 06:55:29
Try ng-style directive: 尝试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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div> </body> </html>
解决方案2
0 2016-12-20 06:42:50
Please try by using a function rather than using the inline definition. 请尝试使用函数而不是使用内联定义。 Also I will prefer to use ng-if rather than ng-show because ng-if will block rendering the HTML template if the condition is wrong. 此外，我更喜欢使用ng-if而不是ng-show因为如果条件错误， ng-if将阻止呈现HTML模板。 Please try the below code snippet. 请尝试以下代码段。
<!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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div> </body> </html>
解决方案3
0 2016-12-20 06:52:53
I don't see you have initialized your angular app. 我没有看到你初始化你的角应用程序。
Try this one: 试试这个：
<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 mb-xs w-xs btn-danger common_btn set_margin_0">Save</button> </div> </div> </div>
解决方案4
0 2016-12-20 07:03:55
You can try this with ng-class 您可以使用ng-class尝试此操作
CSS CSS
<style>
.visibleOff{visibility: hidden;}
</style>
HTML 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JS切换可见性：如何在点击时隐藏已经可见的元素 - JS Toggle Visibility: How to Hide Already Visible Elements on Click
角js按钮单击 - Angular js Button click
Angular Radio按钮单击显示和隐藏不起作用 - Angular Radio button click show and hide not working
Angular JS：基于单击单选按钮相对显示文本框并更改div的背景颜色 - Angular JS : show text box relatively based on click on radio button and change background color of div
在Angular JS中单击提交后如何获取单选按钮中选择的值列表 - How to get list of values which are selected in radio button after click on submit in Angular js
angularJs单选按钮不可见？ - angularJs Radio button not visible?
带有选择，复选框和单选按钮的Angular JS表单 - Angular JS form with select, checkbox and radio button
Bootstrap 和 Angular js 之间的单选按钮冲突 - Radio Button Conflict between Bootstrap And Angular js
需要默认选择Angular JS单选按钮 - Need to Default select an Angular JS Radio Button
角度js默认选中单选按钮 - angular js default checked radio button
相关标签