如何在Angular JS的ng提交后隐藏表格

Question

我的索引上有一个表单，它接受名称的输入。在使用ng-submit提交名称后，我想隐藏表单，然后显示另一个当前未隐藏的div。我试着在表单中添加一个按钮来设置ng-click，并在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; 
}); 

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

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> 

然后在你的控制器只设置hideForm变量真这样的形式会被隐藏，第二步将显示...

this.addName = function() { 

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

    this.newName.name = null; 

    // hide form 
    this.hideForm = true; 

}; 

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

}）;

Answer 3

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

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