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

Question

我的索引中有一个表单，需要输入姓名。使用 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>

Controller

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;
});

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

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

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

this.addName = function() {

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

    this.newName.name = null;

    // hide form
    this.hideForm = true;

};