如何在 Angular JS 中 ng-submit 后隐藏表单答案

【问题标题】：How to hide form after ng-submit in Angular JS如何在 Angular JS 中 ng-submit 后隐藏表单
【发布时间】：2015-10-29 18:21:00
【问题描述】：

我的索引上有一个表格，可以输入姓名。使用 ng-submit 提交名称后，我想隐藏表单，然后显示另一个当前未隐藏的 div。我尝试在表单中添加一个按钮以设置 ng-click 并在单击时显示，但无法使其正常工作（我将按钮取出）并且只有提交输入。

HTML

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

控制器

app.controller('mainController', function($scope) {

    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

任何解释或帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs forms ng-show ng-hide

【解决方案1】：

您可以使用 ng-if 或 ng-show/hide 指令来显示和隐藏 div 取决于表达式...

所以首先将此指令添加到您要显示和隐藏的html部分并赋予它们相同的表达式...

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="mainCtrl.hideForm">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="mainCtrl.hideForm">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

然后在您的控制器中将 hideForm 变量设置为 true，以便隐藏表单并显示第二步...

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;

    // hide form
    this.hideForm = true;

};

【讨论】：

太棒了，也感谢您的解释。一旦 steptwo div 出现，就无法显示表单输入。我的输出显示在另一个视图中，但无法在同一个视图中显示......有什么想法吗？再次感谢！
搞清楚了。再次感谢您的解决方案。

【解决方案2】：

HTML：

 <form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-if="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-if="!hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

控制器：

app.controller('mainController', function($scope) {
$scope.hide = false;
this.newName = { name: '' };

this.names = this.names || [
    { name: ' ' },
];

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;
};
$scope.hide = true;
return this;

});

【讨论】：

我认为$scope.hide = true应该在addName函数里面，因为他想在提交后隐藏Div。另外，指出使用 ng-if 和 ng-show/hide 的区别
正确。我必须将 $scope.hide = true 放在 addName 函数中，以便 div 在 ng-submit 时隐藏

【解决方案3】：

您可以在<form> 标签上使用ng-if 或ng-show 或ng-hide 并控制来自控制器的值。

【讨论】：

【解决方案4】：

HTML 文件：

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
    <input type="button" ng-click="{{hide=true}}">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

JavaScript 文件：

app.controller('mainController', function($scope) {
    $scope.hide = false;
    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

【讨论】：