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> 

clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.

Any help would be great.

Thank You.

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> 

Following changes are done.

1) Clicked item is saved in 'option' variable.

2) Show the form field based on data in 'option' variable.

Answer 2

It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.

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