时间戳

首页 > 解决方案 > 单击Angular 9中的按钮后如何显示表单？

html - 单击Angular 9中的按钮后如何显示表单？

问题描述

我的页面上有一个按钮，当我单击它时，我希望我的表单显示在它的正下方。我还想要我点击按钮的次数，它应该显示很多表单。

我是Angular 9的新手，不知道如何在与按钮相同的页面上显示表单。

按钮代码：

<html>
  <body ng-app>
    <button type="submit" (click)="onClickForm" > Next </button>
  </body>
</html>

表格代码：

<html>
<form>
  First Name: <input type="text" ng-model="firstname">
</form>

标签： htmlangularangularjs-directive

解决方案

解决方案适用于 AngularJS

在视野中 

<html>
  <body ng-app>
      <button type="submit" ng-click="onClickForm()" ng-show="!showForm"> 
         Next 
      </button>        
      <form ng-show="showForm">
         First Name: <input type="text" ng-model="firstname">
      </form>  
   </body>
</html>

在 js 控制器中

$scope.showForm= false;

$scope.onClickForm = function(){
    $scope.showForm = true;
}

推荐阅读