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

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

Answer 2

这似乎令人困惑，因为您想要从显示的网址框开始，因此您需要混合使用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>