我希望 AngularJS 表单仅在提交后显示结果，而不是在完成时显示答案

【问题标题】：I want AngularJS form only to display results after submit not while being completed我希望 AngularJS 表单仅在提交后显示结果，而不是在完成时显示
【发布时间】：2017-10-27 06:59:20
【问题描述】：

我希望此应用仅在按下提交按钮后显示结果。目前结果显示为表格正在完成。我正在使用 Angular。

HTML：

<html>
  <div class="calc-page">
    <div ng-app="myApp" ng-controller="myCtrl" class="hello">
      <h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
      <form action="action_page.php">
        <p>Cost Price: <input type="text" ng-model="costPrice"></p><br>
        <p>Sales Price: <input type="text" ng-model="salesPrice"></p><br>
        <input value="Submit" class="btn btn-default hide-btn">
        <input value="Clear" class="btn btn-default clear-btn">
      </form>
        <div class="results">
          <p>Profit: {{(salesPrice - costPrice)}}</p>
          <p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
          <p>Mark Up: {{((salesPrice - costPrice) / costPrice  * 100)| number:0 }}%</p>
        </div>
  </div>
</html>

JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.costPrice= 0;
    $scope.salesPrice= 0;


});

编解码器：https://codepen.io/Jonod/pen/wKGLzO

【问题讨论】：

标签： angularjs forms submit

【解决方案1】：

你可以：

删除表单action 属性，您可以使用$http 服务创建请求。您不想离开您的单页应用。
您可以在您的范围内使用并引用myForm。喜欢$scope.myForm。
您可以通过$scope.myForm.$submitted 来检查表单是否已提交
您可以通过在表单中添加novalidate 来禁用HTML 验证，然后使用$scope.myForm.$valid 检查您的表单是否有效
你可以通过$scope.myForm.$setPristine()重置表单后重置提交状态
请注意，如果提交了表单，则会显示 <div>，但如果成功提交表单，则显示摘要可能会更好，例如跟踪标志 $http.post('/action_page.php', {...}).then(() => $scope.isSubmittedSuccessfully = true).catch(() => $scope.isSubmittedSuccessfully = false)。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.costPrice= 0;
    $scope.salesPrice= 0;
 
    $scope.onSubmit = () => {
      if(!$scope.myForm.$valid) {
        return;
      }
      
      // note that this is not actually working as there is no /action_page.php
      $http.post('/action_page.php', {
        costPrice: $scope.costPrice,
        salesPrice: $scope.salesPrice
      })
        .then(response => {
          console.log('Submitted!');
        })
        .catch(error => {
          console.log('Submit error!');
        });
    };
    
    $scope.resetForm = () => {
      $scope.costPrice= 0;
      $scope.salesPrice= 0;
      $scope.myForm.$setPristine();
    };
});

/*$(function() {
  $(".results").hide();
});

$(".hide-btn").click(function(){
    $(".results").show();
});

$(".clear-btn").click(function(){
    $(".results").hide();
    $(this).closest('form').find("input[type=text], textarea").val("");
});*/

$primary-color:  #36454f;
$font-stack:  Helvetica, sans-serif;
$font-stack-head:  Impact, sans-serif;

.hello {
  padding: 50px;
  height: 500px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: auto;
  width: 50%;
  padding: 10px;
  border-radius:10px;
  color: $primary-color;
  
  h2 {
    font-family: Impact;
    padding-bottom: 20px;
  }
  
  p {
    font-size: 16px;
    color: $primary-color;
  }
  
}


.calc-page {
  padding: 50px;
  background-color: #e4ebec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%23ffffff' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
};

.results {
  padding: 30px 0 30px 0;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<head>
<body>
  <div class="calc-page">
    <div ng-app="myApp" ng-controller="myCtrl" class="hello">
      <h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
      <form name="myForm" novalidate ng-submit="onSubmit()">
        <p>Cost Price: <input type="number" ng-model="costPrice" required></p><br>
        <p>Sales Price: <input type="number" ng-model="salesPrice" required></p><br>
        <button type="submit" class="btn btn-default hide-btn">Submit</button>
        <button type="button" class="btn btn-default clear-btn" ng-click="resetForm()">Clear</button>
      </form>
      <div class="results" ng-if="myForm.$submitted">
        <p>Profit: {{(salesPrice - costPrice)}}</p>
        <p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
        <p>Mark Up: {{((salesPrice - costPrice) / costPrice  * 100)| number:0 }}%</p>
      </div>
  </div>
</body>

【讨论】：

【解决方案2】：

尝试以下操作（隐藏 div 直到按下按钮或更改输入字段中的值）：

<html>
  <div class="calc-page">
    <div ng-app="myApp" ng-controller="myCtrl" class="hello">
      <h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
      <form action="action_page.php">
        <p>Cost Price: <input type="text" ng-change="submitted=false" ng-model="costPrice"></p><br>
        <p>Sales Price: <input type="text" ng-change="submitted=false" ng-model="salesPrice"></p><br>
        <input value="Submit"  ng-click="submitted=true" class="btn btn-default hide-btn">
        <input value="Clear"  ng-click="clear()" class="btn btn-default clear-btn">
      </form>
        <div class="results" ng-if="submitted">
          <p>Profit: {{(salesPrice - costPrice)}}</p>
          <p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
          <p>Mark Up: {{((salesPrice - costPrice) / costPrice  * 100)| number:0 }}%</p>
        </div>
  </div>
</html>

然后您可以在控制器中添加：

$scope.clear = function() {
    $scope.costPrice= 0;
    $scope.salesPrice= 0;
    $scope.submitted=false;     
  }

【讨论】：

如果 angularJS 提供了所有需要的工具，你为什么要混合使用 jQuery 和 angularJS？我也不明白为什么你需要一个数据库来做这些。根据输入、按钮点击和更改显示/隐藏内容是 angularJS 的方式。
Angular 新手。道歉。肯定会更深入地研究它。谢谢您的帮助。赞赏。
@JonoD 不需要道歉！我们都从某个地方开始 :) 祝你好运和成功！

【解决方案3】：

你可以像下面这样尝试，

模板：

  <form action="action_page.php">
    <p>Cost Price: <input type="text" ng-model="costPriceModel"></p><br>
    <p>Sales Price: <input type="text" ng-model="salesPriceModel"></p><br>
    <input type="button" ng-click="getResult(costPriceModel, salesPriceModel);" value="Submit" class="btn btn-default hide-btn">
    <input type="button" ng-click="clearResult()" value="Clear" class="btn btn-default clear-btn">
  </form>

控制器代码：

$scope.getResult=function(a, b){
  $scope.costPrice= a;
  $scope.salesPrice= b;
}

$scope.clearResult=function(){
  $scope.costPrice= 0;
  $scope.salesPrice= 0;
}

【讨论】：

【解决方案4】：

你可以试试这样的：

HTML：

<html>
  <div class="calc-page">
    <div ng-app="myApp" ng-controller="myCtrl" class="hello">
      <h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
      <form action="action_page.php" ng-submit="call()">
        <p>Cost Price: <input type="text" ng-model="costPrice"></p><br>
        <p>Sales Price: <input type="text" ng-model="salesPrice"></p><br>
        <input type="submit" value="Submit" class="btn btn-default hide-btn">
        <input type="button" value="Clear" class="btn btn-default clear-btn" ng-click="clear()">
      </form>
        <div class="results" ng-if="show">
          <p>Profit: {{(salesPrice - costPrice)}}</p>
          <p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
          <p>Mark Up: {{((salesPrice - costPrice) / costPrice  * 100)| number:0 }}%</p>
        </div>
  </div>
</html>

JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.costPrice= 0;
    $scope.salesPrice= 0;
  $scope.show = false;
  $scope.call = function() {
    $scope.show = true;
  }
  $scope.clear = function() {
    $scope.show = false;
    $scope.costPrice= 0;
    $scope.salesPrice= 0;
  }

});

【讨论】：