AngularJS：在 ng-click 上显示和隐藏类答案

【问题标题】：AngularJS : Show and hide class on ng-clickAngularJS：在 ng-click 上显示和隐藏类
【发布时间】：2016-04-24 07:27:06
【问题描述】：

我正在使用 AngularJS 开发一个网站。我有一个故意设置为“display:none”的表单。

我有一个按钮，上面写着创建。我想要的是，当我单击创建按钮时，设置为“显示：无”的表单应该更改为“显示：块”并且创建按钮应该隐藏。

同样在提交表单后，表单应该隐藏并且创建按钮应该再次可见。

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

这是一件简单的事情，所以如果你能提供代码，那就太好了。

【问题讨论】：

标签： javascript jquery angularjs single-page-application performance-testing

【解决方案1】：

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

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

  }
]);

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

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

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

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

【讨论】：

@papakia....感谢代码。还有一件事......我不想显示隐藏按钮。它应该只显示带有提交按钮的表单，当我们提交它时，它应该再次显示显示按钮。
@SteveJax 没问题 :) 如果这个或任何答案解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

【解决方案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>

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

【讨论】：

我有点明白你的意思。如果您想在单击后隐藏按钮，可以在按钮中添加 ng-hide="showToggle"。然后在提交表单时，将 showToggle 设置回 false。 showToggle 只是一个附加到 $scope 的变量。您可以使用多个变量来隐藏和显示不同的内容。
谢谢迈克尔....这很好用！我知道单击“单击以显示”按钮时“showToggle”的值会发生变化，但默认情况下，showToggle 的值在开始时如何设置为 false。
它设置为 undefined ，这是 JS 中的错误值。这个答案解释了它：stackoverflow.com/questions/19839952/…

【解决方案3】：

最初显示Click To Show 按钮，当单击此按钮时将显示您的内容并显示另一个按钮Click To hide 按钮，因此还需要为两个按钮使用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="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>

【讨论】：