[英]Angular Radio button click show and hide not working
我是Angular的初學者,當我單擊單選按鈕顯示和隱藏div區域時,嘗試創建Angular 5。 ,當我單擊customer-2
單選按鈕時,我創建了customer-1
和customer-2
單選按鈕 (它顯示為1st div),那是正常的html可以正常工作,但是對於angular 5卻不起作用,有人知道如何正確地把那個放在Angular5中?
謝謝
HTML
<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="top-radio">
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
<label for="radio1">
customers-1
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
<label for="radio2">
customers-2
</label>
</div>
</div>
<form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
<div class="frm-btm-mrg">
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Company name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Website" type="text">
</div>
<div class="form-group">
<input class="form-control contact-num" placeholder="Contact number" type="text">
</div>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign up</button>
</form>
<form class="fotm" id="nc_signup" action="rfq.html">
<div class="frm-btm-mrg-2">
<div class="form-group">
<input class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign ups</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
實時代碼-Stackblitz
JavaScript的
<script>
function changediv(divid){
$("#nc_signup").hide();
$("#cc_signup").hide();
$("#"+ divid).show();
}
</script>
function changediv(divid) { $("#nc_signup").hide(); $("#cc_signup").hide(); $("#"+ divid).show(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">SIGN UP</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-12"> <div class="top-radio"> <div class="radio radio-primary"> <input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1"> <label for="radio1"> customers-1 </label> </div> <div class="radio radio-primary"> <input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2"> <label for="radio2"> customers-2 </label> </div> </div> <form class="fotm" id="cc_signup" style="display: none;" action="rfq.html"> <div class="frm-btm-mrg"> <div class="form-group"> <input class="form-control" placeholder="Email id" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="Password" type="password"> </div> <div class="form-group"> <input class="form-control" placeholder="Re-enter password" type="password"> </div> <div class="form-group"> <input class="form-control" placeholder="Company name" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="Website" type="text"> </div> <div class="form-group"> <input class="form-control contact-num" placeholder="Contact number" type="text"> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox"> <label for="checkbox2"> I agree terms & conditions </label> </div> </div> <button type="submit" class="btn">Sign up</button> </form> <form class="fotm" id="nc_signup" action="rfq.html"> <div class="frm-btm-mrg-2"> <div class="form-group"> <input class="form-control" placeholder="User name" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="Email id" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="Password" type="password"> </div> <div class="form-group"> <input class="form-control" placeholder="Re-enter password" type="password"> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox"> <label for="checkbox3"> I agree terms & conditions </label> </div> </div> <button type="submit" class="btn">Sign ups</button> </form> </div> </div> </div> </div> </div> </div>
做到這一點的Angular方法是將代碼放在app.component.ts中,而不是在帶有jquery選擇器的腳本標簽中。
您的類中應該有兩個成員變量,它們由component.ts-fil中的方法更改,並通過使用HTML中的(單擊)綁定到該方法。 要綁定到代碼中的變量,請使用[attr]語法。
您可以在這里查看我的代碼分支https://stackblitz.com/edit/angular-ktt3ri
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.