角度JS：<strong>会社</strong>ラジオボタンをラジオボタンの選択に基づいて、ショーの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>