Angular JS：コントローラまたはモデルを使用せずに選択オプションに基づいて表示/閉じるdiv

Question

Angular JSを初めて使用しています。選択肢に基づいてコントローラやモデルを使わずにdivを表示/非表示したい。私が欲しいもの

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<select class=""> 
 
                <option class="add_btn_with_file">Add button with file</option> 
 
                <option class="add_btn_with_link">Add button with link</option> 
 
                <option class="add_btn_with_text">Add button with text </option> 
 
               </select> 
 

 

 
<div class=""> 
 

 
               <input type="file" id="browse" name="fileupload" class="file_display_none" /> 
 
               
 
              </div> 
 

 

 
<div class=""> 
 
    <input type="text" placeholder="button with link" ></div>

です。私は、ファイルとボタンを選択すると

その後、ファイル divが開いている必要があり、他は閉じられなければならないと私はリンクでボタンを選択すると、その後テキストボックスが開きます。

私はコントローラーとモデルを使用することができますが、私はそれらを使用せずにやりたいです。

私はそれを行うことができるように何か方法はありますか？

ありがとうございます。

Answer 1

あなたのコメントによると、コントローラやモデルを使用してタスクを実行したくないとわかります。私はなぜ角度を使用するのだろうかと思う！

とにかく、モデルとコントローラが関連付けられていることを理解しておく必要があります。 thisを通過すると、多くのことが明らかになります。

あなたはコントローラ内のロジックを記述したくない場合は、あなたがng-modelとng-switch次のように組み合わせを進めることができ、

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<select class="" ng-model="fileSelect"> 
 
                <option class="add_btn_with_file" value="file">Add button with file</option> 
 
                <option class="add_btn_with_link" value="link">Add button with link</option> 
 
                <option class="add_btn_with_text" value="text">Add button with text </option> 
 
               </select> 
 

 
<div ng-switch="fileSelect"> 
 
<div class="" ng-switch-when="file"> 
 

 
               <input type="file" id="browse" name="fileupload" class="file_display_none" /> 
 
               
 
              </div> 
 

 

 
<div class="" ng-switch-when="text"> 
 
    <input type="text" placeholder="button with link" ></div> 
 

 
<div class="" ng-switch-default> 
 

 
               <input type="file" id="browse" name="fileupload" class="file_display_none" /> 
 
               
 
              </div> 
 
</div>

Answer 2

確認、うん、それはjQueryのほんの一部です。ここでは https://codepen.io/anon/pen/zojPKaで説明されていますが、基本はchange（）とスイッチです。

$("select.foo").change(function(){ 
    var selected = $("select.foo").val(); 
    switch(selected){ 
    case "Add button with file": 
     $("#fileInput").show(); 
     $("#textInput").hide(); 
     break; 
    case "Add button with text": 
     $("#fileInput").hide(); 
     $("#textInput").show(); 
     break; 
    default: 
     $("#fileInput, #textInput").hide(); 
     break; 
    } 
});