Question

我有两个输入框：长度和宽度。

计算的面积是l * b，基于此，我正在计算结果。我的结果是要处理的区域：= (sum +(sum *0.05))。

它工作正常，但问题是当我手动进入区域时没有长度和宽度，我得到的结果不同了。即使我手动输入区域，两个结果也必须相同。

例如，如果我将区域输入为1，则输出为10.05。

如果我输入1和广度1的长度，则区域为1，因此输出为1.05 ，这是正确的。

我是否需要1.05我是否只输入长度和宽度，或仅仅是区域。

＆＃13;

var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function ($scope) {

     /* Start constants declaration*/
     $scope.constant = {coeff : "0.003"};
     /*End constants declaration*/

     /*Start user input values and Function to add/remove input fields*/
     $scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
     $scope.addNewChoice = function () {
          var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({'id' : 'choice' + newItemNo, l2 : 0, b2 : 0});

     };

     $scope.removeChoice = function () {
          var lastItem = $scope.choices.length - 1;
          if (lastItem !== 0) {
               $scope.choices.splice(lastItem);
          }
     };

     $scope.sum = function () {
          var sum = 0;
          angular.forEach($scope.choices, function (choice) {
               sum += choice.l2 * choice.b2;
          });
          return sum;
     }
      $scope.Getarea = function () {
                $scope.total = document.getElementById("total").value;
                //totalsum =$scope.total;
                //alert(totalsum);
            };
            
    $scope.$watch($scope.sum, function (value) {
        $scope.total = value;
    });

     /*End user input values and Function to add/remove input fields*/

});

＆＃13;

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src ="area.js"></script>
    <script type="text/javascript"></script>
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
     <h3 class="text-red bottom-line-thick">Antitermite treatment Calculator</h3>

     <div class="col-md-12 col-sm-12 col-xs-12 step-2">
          <div class="heading"><b>Step: 2</b> - Enter your <b>Requirement</b></div>

         <!--Start Input calculation-->

          <div  data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line">
	 <button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align" ng-show="$last" ng-click="removeChoice()">
                         <span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
                    </button>
                    <button type="button" class="btn btn-default pull-right btn-right-gap  btn-red" aria-label="Left Align" ng-click="addNewChoice()">
                         <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    </button>
               </h4> 
               <div class="walls">
                    <div class="form-group col-md-4 col-sm-6 col-xs-6">
                         <label for="length">Length ({{data.selectedOption.name}}):</label>
                         <input type="number" class="form-control text-red bold" id="length"  ng-model="choice.l2">
                    </div>
                    <div class="form-group col-md-4 col-sm-6 col-xs-6">
                         <label for="breadth">Breadth ({{data.selectedOption.name}}):</label>
                         <input type="number" class="form-control text-red bold" id="breadth" ng-model="choice.b2">
                    </div>
                    <div class="form-group col-md-4 col-sm-6 col-xs-6">
                         <label for="area">Area (sq {{data.selectedOption.name}}):</label>
                         <input type="number" class="form-control text-red bold" id="total" placeholder="Area"  ng-model="total" ng-change="Getarea()">
                    </div>
               </div>

          </div>
     </div>  
  <div class="col-md-12 col-sm-12 col-xs-12 step-result bottom-gap">
          <div class="heading"><b>Step: 3</b> - Material <b>Required</b></div>
          <div class="col-md-12 ">

               <div class="col-md-4 col-sm-4 col-xs-4">
                    <p class="bold">Area to be treated:</p>
                    <h1>{{(total + (total * 0.05))|number:2}}<span class="small-text"> (sq {{data.selectedOption.name}}):</span></h1>
               </div>
               <div class="col-md-4 col-sm-4 col-xs-4">
                    <p class="bold">ATT Chemical</p>
                    <h1>{{((total + (total* 0.05)) * constant.coeff) |number:2}}<span class="small-text">ltrs</span></h1>
               </div>

          </div> 
     </div>                        
</div> 
</div>            
</body>
</html>

＆＃13;

Answer 1

当您输入ng-model=total时，它实际上会被视为字符串。您可以使用input type=number，或者您可以在设置总数时将其强制转换为数字：

$scope.Getarea = function () {
  // numeric cast
  $scope.total = +document.getElementById("total").value;
}

由于您已经拥有ng-model，因此您根本不需要ng-change，并使用input type=number将其作为数字工作，或者您可以将其投放到实际使用的地方它

{{((+total + (total* 0.05)) * constant.coeff) |number:2}}

手动输入/计算

1 个答案: