AngularJS：在ng-click

Question

我正在AngularJS的一个网站上工作。我有一个表格，故意设置为“display：none”。

我有一个说创建的按钮。我想要的是，当我点击创建按钮时，设置为“display：none”的表单应该更改为“display：block”，并且应该隐藏创建按钮。

提交表单后，表单应隐藏，再次显示创建按钮。

P.S：现在我明白有几种方法可以做到这一点，比如我可以使用ng-show或ng-hide指令。或者我可以使用ng-click指令。在开发严肃而专业的Web应用程序时，我想知道这种情况下最好的编程实践。

这是一件简单的事情，所以如果你能提供一些很棒的代码。

Answer 1

只需将ngClick指令与ngShow指令一起使用，请参阅下面的工作示例：

＆＃13;

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('FormController', ['$scope',
  function($scope) {

    // init showForm to false;
    $scope.showForm = false;

    // init empty user object for our form
    $scope.user = {};

    $scope.submitForm = function() {
      // logic when the form is submitted
      //...

      // reset the user
      $scope.user = {};

      // finally hide the form
      $scope.showForm = false;
    };

  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="FormController">

    <button ng-hide="showForm" ng-click="showForm = true">Show form</button>

    <form ng-show="showForm" ng-submit="submitForm()">

      <input type="text" name="firstname" ng-model="user.firstname" />

      <input type="submit" value="submit" />

    </form>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

我们正在设置表单以显示showForm是否为真。

使用ngClick元素上的button指令切换此变量，并在submitForm函数的控制器中显式设置为false。

我们使用ngSubmit指令将submitForm()绑定到onsubmit事件。提交表单后，运行逻辑，然后重置并隐藏表单。

Answer 2

我会使用ng-click和ng-show。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div class="hideShow" ng-show="showToggle">
    <form ng-submit="showToggle = false"></form>
fghfgh
  </div>
  <button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button>
</div>

这将开始隐藏，并在您单击按钮时显示。

Answer 3

最初显示Click To Show按钮，点击此按钮后会显示您的内容并显示另一个按钮Click To hide按钮，因此还需要对这两个按钮使用ng-show。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div class="hideShow" ng-show="isShow">
    <p>here your form or other content
      <p>
  </div>
  <button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button>
  <button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button>
</div>

＆＃13;

＆＃13;

＆＃13;