堆棧內存溢出
  簡體   English   中英

Angular JS：單擊單選按鈕時可見性可見

[英]Angular JS : visibility visible on click on radio button

 原文  2016-12-20 06:32:36  9   4    javascript/ html/ angularjs

問題描述

我有兩個單選按鈕，兩個文本框和一個按鈕。

當我點擊第一個按鈕時，只會出現一個文本框，當我點擊第二個按鈕時，應該出現兩個文本框。

但我想用可見性：隱藏|可見屬性，因為我希望按鈕位置固定在兩個文本框下面。 

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

謝謝。

4 個解決方案

解決方案1
 1 已采納  2016-12-20 06:55:29

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

請嘗試使用函數而不是使用內聯定義。 此外，我更喜歡使用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 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

我沒有看到你初始化你的角應用程序。

試試這個： 

  <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

您可以使用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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JS切換可見性：如何在點擊時隱藏已經可見的元素 角js按鈕單擊 Angular Radio按鈕單擊顯示和隱藏不起作用 Angular JS：基於單擊單選按鈕相對顯示文本框並更改div的背景顏色 在Angular JS中單擊提交后如何獲取單選按鈕中選擇的值列表 angularJs單選按鈕不可見？ 帶有選擇，復選框和單選按鈕的Angular JS表單 Bootstrap 和 Angular js 之間的單選按鈕沖突 需要默認選擇Angular JS單選按鈕 角度js默認選中單選按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM