Question

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

enter image description here

我想在关键字标签输入字段下添加一个链接，如“高级”，如果点击则必须不包括，必须包含表单字段折叠/展开，或者显示/消失。

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

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

这是正确的方法吗？我应该使用不同的方法吗？一些帮助会很棒！

谢谢！亚历

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

Answer 1

Ng-show和ng-hide用于根据需要操纵视图。大多数人在开始角度时所犯的错误是他们直接尝试将内容定位到显示/隐藏而不是创建表单的状态。表单的状态将决定表单的视图。所有这些都可以在您的控制器中发生，以保持其良好和可读性例如：

App.controller('Ctrl1', function Ctrl1 ($scope, TestService) {
    $scope.isAdvancedState = false;

    $scope.changeStatus = function() {
        $scope.isAdvancedState = true;
    }
});

你完全走在正确的轨道上。 Angular起初有点奇怪，但很快变得非常惊人。坚持下去：）

谢谢，

约旦

Answer 2

你有什么似乎可以正常工作，假设changeStatus()调用会做类似的事情：is_modal = !is_modal;你可以更简单地定义你的模板。例如，将单个div中的两个高级字段都包含在一个ng-show="is_modal"中，那么您就不必处理额外的跨度，但这取决于您所做的事情。重新尝试用你的标记完成......

但是，看起来你在那里应该工作得很好。

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

2 个答案: