Question

块引用选择类别后，输入字段是长度，宽度，thikenes。基于此输入我得到此输出： - 熨平板数量：1050，水泥：189袋，沙子：12.60cft 但问题是在单击+按钮后显示NaN，我需要存储以前的输出值mast将被添加到NaN值上的新输出中。

var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function($scope) {

     /* Start constants declaration*/
    $scope.type={"M20 (1:1.5:3)":{cement:"0.180",sand :"0.012",mmaggregate20:"0.017",mmaggregate12:"0.007"},
                 "M21 (1:1.5:3)":{cement:"0.227",sand :"0.012",mmaggregate20:"0.017",mmaggregate12:"0.007"}};
                        
     /*End constants declaration*/

     /*Start user input values and Function to add/remove input fields*/
     $scope.choices = [{id : 'choice1', l2 : 10, b2 : 10,d2:10}];
     $scope.addNewChoice = function() {
          var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({'id' : 'choice' + newItemNo});
     };

     $scope.removeChoice = function() {
          var lastItem = $scope.choices.length - 1;
          $scope.choices.splice(lastItem);
     };

     $scope.sum = function() {
          var sum = 0;
          angular.forEach($scope.choices, function(choice) {
               sum += choice.l2 * choice.b2*choice.d2;
          });
          return sum;
     }
     /*End user input values and Function to add/remove input fields*/


     /*End function to select units*/

});

<!DOCTYPE html>
<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <body>
          <div ng-app="Calc" ng-controller="Calc_Ctrl">
                <script src="scc.js"></script>
               <!--Start Input calculation-->
               Select a category:
               <select ng-model="selectedgrade" ng-options="x for (x, y) in type" >
               </select>
          
               <br> <b>Input</b>
               <form  data-ng-repeat="choice in choices">
                    {{$index + 1}} :
                    Length:<input type="number" ng-model="choice.l2"  />
                    width: <input type="number" ng-model="choice.b2"  />
                    Thickness: <input id="area" type="number" ng-model="choice.d2"  />
                    <button  ng-click="addNewChoice()">+</button>

                    <button  ng-show="$last" ng-click="removeChoice()">-</button>
                    </br>
               </form>
               <h2>cement: {{selectedgrade.cement}}</h2>
               <!--End Input  calculation-->
               <br> <b>Output</b><br>
               
               Screed qty:{{(sum() + (sum() * 0.05))}}<br>
               Cement:{{((sum() + (sum() * 0.05))*selectedgrade.cement)|number:0}}bags<br>
               sand:{{((sum() + (sum() * 0.05))*selectedgrade.sand)|number:2}}cft<br>
               
               <!--end Output calculation-->
          </div>
     </body>
</html>

Answer 1

当你添加新的空白项时，你应该将属性l2，b2，d2指定为零或将sum函数代码更改为这样的东西（因为未定义的数字转到NaN）：

$scope.sum = function() {
          var sum = 0;
          angular.forEach($scope.choices, function(choice) {
               if(choice && choice.l2 && choice.b2 && choice.d2)
                   sum += choice.l2 * choice.b2*choice.d2;
          });
          return sum;
     }

＆＃13;

var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function($scope) {

     /* Start constants declaration*/
    $scope.type={"M20 (1:1.5:3)":{cement:"0.180",sand :"0.012",mmaggregate20:"0.017",mmaggregate12:"0.007"},
                 "M21 (1:1.5:3)":{cement:"0.227",sand :"0.012",mmaggregate20:"0.017",mmaggregate12:"0.007"}};
                        
     /*End constants declaration*/

     /*Start user input values and Function to add/remove input fields*/
     $scope.choices = [{id : 'choice1', l2 : 10, b2 : 10,d2:10}];
     $scope.addNewChoice = function() {
          var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({'id' : 'choice' + newItemNo, l2:0, b2:0,d2:0});
     };

     $scope.removeChoice = function() {
          var lastItem = $scope.choices.length - 1;
          $scope.choices.splice(lastItem);
     };

     $scope.sum = function() {
          var sum = 0;
          angular.forEach($scope.choices, function(choice) {
            if(choice && choice.l2 && choice.b2 && choice.d2)
               sum += choice.l2 * choice.b2*choice.d2;
          });
          return sum;
     }
     /*End user input values and Function to add/remove input fields*/


     /*End function to select units*/

});

＆＃13;

<!DOCTYPE html>
<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <body>
          <div ng-app="Calc" ng-controller="Calc_Ctrl">
                <script src="scc.js"></script>
               <!--Start Input calculation-->
               Select a category:
               <select ng-model="selectedgrade" ng-options="x for (x, y) in type" >
               </select>
          
               <br> <b>Input</b>
               <form  data-ng-repeat="choice in choices">
                    {{$index + 1}} :
                    Length:<input type="number" ng-model="choice.l2"  />
                    width: <input type="number" ng-model="choice.b2"  />
                    Thickness: <input id="area" type="number" ng-model="choice.d2"  />
                    <button  ng-click="addNewChoice()">+</button>

                    <button  ng-show="$last" ng-click="removeChoice()">-</button>
                    </br>
               </form>
               <h2>cement: {{selectedgrade.cement}}</h2>
               <!--End Input  calculation-->
               <br> <b>Output</b><br>
               
               Screed qty:{{(sum() + (sum() * 0.05))}}<br>
               Cement:{{((sum() + (sum() * 0.05))*selectedgrade.cement)|number:0}}bags<br>
               sand:{{((sum() + (sum() * 0.05))*selectedgrade.sand)|number:2}}cft<br>
               
               <!--end Output calculation-->
          </div>
     </body>
</html>

＆＃13;

添加新字段后，输出将在angularjs中出现NaN

1 个答案: