Angular JS：基於單選按鈕選擇顯示div

Question

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <div ng-app=""> <div class="radio_toggle"> <label class="hubilo"> <input type="radio" name="registration_options" checked="checked"> <span>Company ABC</span></label> <label class="other" > <input type="radio" name="registration_options" ng-click="show_other=true"> <span>Other</span></label> <label class="none" > <input type="radio" name="registration_options" ng-click="display=false"> <span>None</span></label> </div> <div class="form-group" ng-show="show_other"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="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"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="col-md-10 col-sm-10 col-xs-12"> <span>Link</span> <input class="form-control" placeholder="http://" type="text"> </div> </div> </div> 

單擊“ 公司”單選按鈕僅鏈接將打開，然后單擊其他單選按鈕按鈕文本框和鏈接，兩者均應打開。 然后單擊無。 他們兩個都應該躲起來。

任何幫助都會很棒。

謝謝。

Answer 1

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <div ng-app=""> <div class="radio_toggle"> <label class="hubilo"> <input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'"> <span>Company ABC</span></label> <label class="other" > <input type="radio" name="registration_options" ng-click="option='other'"> <span>Other</span></label> <label class="none" > <input type="radio" name="registration_options" ng-click="option='none'"> <span>None</span></label> </div> <div class="form-group" ng-show="option ==='other'"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="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 ==='other' || option === 'company'"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="col-md-10 col-sm-10 col-xs-12"> <span>Link</span> <input class="form-control" placeholder="http://" type="text"> </div> </div> </div> 

完成以下更改。

1）單擊的項目保存在“選項”變量中。

2）根據“選項”變量中的數據顯示表單字段。

Answer 2

這似乎令人困惑，因為您想從顯示的URL框開始，因此需要混合使用ng-show和ng-hide然后在單擊時覆蓋它們。

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <div ng-app=""> <div class="radio_toggle"> <label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label> <label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label> <label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label> </div> <div class="form-group" ng-show="show_other"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="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-hide="show_url"> <label class="col-md-2 col-sm-2 col-xs-12 control-label"></label> <div class="col-md-10 col-sm-10 col-xs-12"> <span>Link</span> <input class="form-control" placeholder="http://" type="text"> </div> </div> </div>