我想作一个简单的计算器在角的js

这里是我的代码...我想作一个简单的计算器在角的js

<html ng-app='CalC'> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
     <script > 
      var app = angular.module('CalC',[]); 
      app.controller('stoInt',function($scope){ 
       $scope.parseInt(txt1,10); 
       $scope.parseInt(txt2,10); 
      }); 
     </script> 
    </head> 
    <body ng-controller="stoInt"> 
     <div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;"> 
      <div class="panel-body"> 
       <input type="text" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*"> 
       <br> 
       <input type="text" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]"> 
      <br><br> 
       <p> Result :: {{txt1+txt2}} </p> 
      </div> 
     </div> 

    </body> 
</html>

O/P结果:: {{TXT1 + TXT2}}。

来源

2017-06-04 Prince

解决方案1 

有在你的代码一些错误，你需要做parseInt函数的范围变量

parseInt($scope.txt1,10); 
parseInt($scope.txt2,10);

您可以定义一个函数来计算总和，并将其返回，

$scope.add = function(){ 
     return parseInt($scope.txt1) + parseInt($scope.txt2); 
    }

DEMO

<html ng-app='CalC'> 
 
    \t <head> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    \t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 
    \t \t <script > 
 
    \t \t \t var app = angular.module('CalC',[]); 
 
    \t \t \t app.controller('stoInt',function($scope){ 
 
    \t \t \t $scope.add = function(){ 
 
       return parseInt($scope.txt1) + parseInt($scope.txt2); 
 
      } 
 
    \t \t \t }); 
 
    \t \t </script> 
 
    \t </head> 
 
    \t <body ng-controller="stoInt"> 
 
    \t \t <div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;"> 
 
    \t \t \t <div class="panel-body"> 
 
    \t \t \t \t <input type="text" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*"> 
 
    \t \t \t \t <br> 
 
    \t \t \t \t <input type="text" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]"> 
 
    \t \t \t <br><br> 
 
    \t \t \t \t <p> Result :: {{add()}} </p> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t 
 
    \t </body> 
 
    </html>

溶液2

使输入类型为number，

<div class="panel-body"> 
<input type="number" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*"> 
<br> 
<input type="number" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]"> 
<br><br>

DEMO

<html ng-app='CalC'> 
 
    \t <head> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    \t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 
    \t \t <script > 
 
    \t \t \t var app = angular.module('CalC',[]); 
 
    \t \t \t app.controller('stoInt',function($scope){  \t \t \t  
 
    \t \t \t }); 
 
    \t \t </script> 
 
    \t </head> 
 
    \t <body ng-controller="stoInt"> 
 
    \t \t <div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;"> 
 
    \t \t \t <div class="panel-body"> 
 
    \t \t \t \t <input type="number" class="form-control" placeholder="Enter 1st Number" ng-model="txt1" pattern="[0-9]*"> 
 
    \t \t \t \t <br> 
 
    \t \t \t \t <input type="number" class="form-control" placeholder="Enter 2nd Number" ng-model="txt2" pattern="[0-9]"> 
 
    \t \t \t <br><br> 
 
    \t \t \t \t <p> Result :: {{txt1+txt2}} </p> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t 
 
    \t </body> 
 
    </html>

来源

2017-06-04 08:07:27 Sajeetharan

@AlonEitan回答是提到 – Sajeetharan

谢谢..它的工作.. – Prince

@Prince标记为答案，如果它帮助 – Sajeetharan

我想作一个简单的计算器在角的js

回答

相关问题