Question

这是我的代码......

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

Answer 1

解决方案1 

您的代码中存在少量错误，您需要为范围变量

创建parseInt

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

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

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

<强>样本

＆＃13;

    <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.add = function(){
               return parseInt($scope.txt1) + parseInt($scope.txt2);
             }
    			});
    		</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 :: {{add()}} </p>
    			</div>
    		</div>
    		
    	</body>
    </html>

＆＃13;

解决方案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>

<强>样本

＆＃13;

<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){    			   
    			});
    		</script>
    	</head>
    	<body  ng-controller="stoInt">
    		<div class="panel panel-default" style="height: 200px;width : 200px;margin: 100px;">
    			<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>
    				 <p> Result :: {{txt1+txt2}} </p>
    			</div>
    		</div>
    		
    	</body>
    </html>

＆＃13;

我想在Angular Js中制作一个简单的CalC

1 个答案: