折叠/展开AngularJS中的表单字段

debugcn 发表于 Dev

亚历杭德罗·VK

我刚开始使用Angular，并且有很多疑问。现在，我有一个包含多个字段的表单，请检查图像：

在此处输入图片说明

我想在“关键字标签输入”字段下添加一个链接，类似“高级”，如果单击，则“不得包含”和“必须包含表单字段”折叠/展开或出现/消失。

也就是说，我不确定是否必须在要显示/隐藏的字段中使用ng-show或ng-hide，然后使用ng单击“ Advanced”链接以更改其状态。例如这样的事情：

    <div class="cg">
        <label class="cl">Keywords</label>
        <div class="controls">
            <input id="id_search"
                   ui-select2 = "{multiple: true, simple_tags: true, tags: []}"
                   />
             <div class="qs"
                  popover-placement="left"
                  popover-trigger="mouseenter"
                  popover="Type your search"></i></div>
            <a ng-click="changeStatus()">Advanced</a>
        </div>
    </div>

    <div class="cg" ng-show="form_element.status">
        <label class="cl">Must not include</label>
        <div class="controls">
            <input id="id_must_not_include"
                   class="input-block-level"
                   ng-disabled="tagItem.perm == 'r'"
                   ui-select2 = "{multiple: true, simple_tags: true, tags: []}"
                   ng-model="not_include"/>
            <div class="qs"
                 ng-show="is_modal"
                 tooltip="Must not include words."
                 tooltip-placement="left"><i class="icon-question-sign"></i></div>
            <span class="help-block" ng-hide="is_modal"></span>
        </div>
    </div>

    <div class="cg" ng-show="form_element.status">
        <label class="cl">Must include</label>
        <div class="controls">
            <input id="id_must_include"
                   class="input-block-level"
                   ng-disabled="tagItem.perm == 'r'"
                   ui-select2 = "{multiple: true, simple_tags: true, tags: []}"
                   ng-model="must_include"/>
            <div class="qs"
                 ng-show="is_modal"
                 tooltip="Must include words."
                 tooltip-placement="left"><i class="icon-question-sign"></i></div>
            <span class="help-block" ng-hide="is_modal"></span>
        </div>
    </div>

这是正确的方法吗？我应该使用其他方法吗？一些帮助将是巨大的！

谢谢！亚历杭德罗

注意：对于处于类似情况的其他人，请检查此jsbin以了解如何执行此操作

肯德奇

假设changeStatus()调用将执行以下操作，那么您所拥有的一切似乎都可以正常工作：is_modal = !is_modal;您可以肯定地更简单地定义模板。例如，将两个高级字段都打包为一个div，ng-show="is_modal"那么您不必处理额外的跨度，但这仅取决于您要完成的标记操作...

但是，看来您所拥有的应该可以正常工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。