角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）点击的项目被保存在'option'变量中。

2）根据'option'变量中的数据显示表单域。

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>