javascript - Angular JS : Show/Close div based on select option without using controller or model

Question

我是 Angular JS 新手。我想根据选择选项显示/隐藏 div，但不使用 Controller 或模型。

<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应该打开，其他div应该关闭，当我选择带有链接的按钮时<强>文本框应该打开。

我可以使用 Controller 和模型，但我想不使用它们。

有什么办法可以让我做到这一点吗？

谢谢。

Answer 1

根据您的评论，我发现您不想使用 Controller 或模型来完成您的任务。我想知道为什么要使用 Angular !!

无论如何，你必须明白模型和 Controller 是相关的。浏览this ，它会为你澄清很多事情。

但是，如果您不想在 Controller 中编写逻辑，则可以继续使用 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>