Question

我希望此应用仅在按下提交按钮后显示结果。目前结果显示为表格正在完成。我正在使用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;


});

CODEPEN：https://codepen.io/Jonod/pen/wKGLzO

Answer 1

尝试以下操作（隐藏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;     
  }

Answer 2

您可以尝试这样的事情：

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

});

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

Answer 4

你可以：

删除表单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>

我希望AngularJS表单仅在完成后提交时显示结果

4 个答案: