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

我刚开始的时候有很多疑问。现在我有一个带有多个字段的表单，请检查图像：

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

也就是说，我不确定是否必须在要显示/隐藏的字段中使用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>

关键词
若要查看如何执行此操作，假定
changeStatus（）
调用将执行以下操作：
是模态=！是模态您可以更简单地定义模板。例如，用一个
ng show=“is_modal”
将两个高级字段包装在一个
div
中，这样您就不必处理额外的跨度，但这取决于您试图用标记实现什么

但是，看起来您在那里拥有的应该可以正常工作。
如果
changeStatus（）
调用将执行如下操作，那么您在那里拥有的似乎可以正常工作：
is\u modal=！是模态您可以更简单地定义模板。例如，用一个
ng show=“is_modal”
将两个高级字段包装在一个
div
中，这样您就不必处理额外的跨度，但这取决于您试图用标记实现什么

但是，它看起来应该可以正常工作。
Ng show和Ng hide用于根据需要操纵视图。大多数人在启动angular时所犯的错误是，他们直接尝试以要显示/隐藏的内容为目标，而不是创建表单的状态。表单的状态决定了表单的视图。所有这些都可以发生在控制器中，以保持其美观和可读性，例如：

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

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

你的想法完全正确。角度一开始有点奇怪，但很快就会变得非常惊人。坚持下去：）

谢谢

Jordan
Ng show和Ng hide用于根据需要操纵视图。大多数人在启动angular时所犯的错误是，他们直接尝试以要显示/隐藏的内容为目标，而不是创建表单的状态。表单的状态决定了表单的视图。所有这些都可以发生在控制器中，以保持其美观和可读性，例如：

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

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

你的想法完全正确。角度一开始有点奇怪，但很快就会变得非常惊人。坚持下去：）

谢谢

Jordan
你的例子看起来是100%。使用ngShow指向类似formElement.shouldShow的字段，并使用ngClick在控制器内使用函数（如示例所示）或
ng click=“formElement.shouldShow=！formElement.shouldShow”
切换此布尔值。您的示例看起来是100%。使用ngShow指向类似于formElement的字段。应使用ngClick显示并切换此布尔值，使用控制器内的函数（如示例所示）或
ng click=“formElement.shouldShow=！formElement.shouldShow”
Jordan和您的响应都是正确的，并引导我找到正确的解决方案，因此，很难确定哪一个是正确答案。我将使用先进先出策略，并只是给你，但让其他读者知道，这两个都是正确的！我用一个JSBin链接编辑了我的问题，如果有人需要它，我也会这样做。我们基本上从不同的角度做了同样的事情。代码太棒了！乔丹和你的回答都是正确的，并引导我找到正确的答案，因此，很难确定哪一个是正确的答案。我将使用先进先出策略，并只是给你，但让其他读者知道，这两个都是正确的！我用一个JSBin链接编辑了我的问题，如果有人需要它，我也会这样做。我们基本上从不同的角度做了同样的事情。代码太棒了！我认为两者在功能上是100%相等的。