Angular JS：基于选择选项显示/关闭div而不使用控制器或模型

Question

I am new to Angular JS. I want to show/hide div based on select option but without using controller or model.

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

what i want is .

when i select button with file then file div should be open and others should be closed and when i select button with link then textbox should open.

I can do using controller and model, but I want to do it without using them.

so is there any way so that I can do that?

Thank You.

Answer 1

As per your comments I find you don't want to use Controller or model to do your task. I wonder why use angular then!!

Anyways, you must understand that model and Controller are correlated. Go through this , it will clarify a lot of things for you.

However, if you don't want to write the logic in controller, you can go ahead with a combination of ng-model and ng-switch as follows,

 <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

Yeah, sure, it's a trivial piece of jQuery. Demonstrated here https://codepen.io/anon/pen/zojPKa , but the basis is just a change() and a switch.

$("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;
  }
});