我正在尝试使用Angularjs创建一个简单的计算器,在我的代码中我无法获得运算符值。我该如何修复它?
Home html包含获取两个数字和operator.User必须选择运算符..
我的代码 -
var name = "myApp";
requires = [];
app = angular.module(name, requires);
app.controller('calcCtrl', function($scope) {
//$scope.cdata={};
console.log("calcCtrl works!");
var opp;
ans = 0;
opp = $scope.singleSelect;
console.log("opp ==> "+opp);
$scope.calculateNums = function(nu1, nu2) {
console.log("function works!");
console.log("nu1 ==> "+nu1);
console.log("opp in calculateNums ==> "+opp);
if (opp == "+") {
ans = (parseInt(nu1) + parseInt(nu2));
console.log("ans ==> "+ans);
} else if (opp == "-") {
ans = (parseInt(nu1) - parseInt(nu2));
}
console.log("ans ==> "+ans);
return ans;
}
});
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h3>Hello</h3>
<div ng-controller='calcCtrl' >
Number 1::<input Type="text" name="number1" ng-model="n1"/ required> <br/>
Number 2::<input Type="text" name="number2" ng-model="n2"/ required> <br/>
operator::<select ng-model="singleSelect">
<option value="+">+</option>
<option >*</option>
<option>-</option>
<option>/</option>
</select></p> <br/>
<button ng-click="calculateNums(n1,n2)">Calculate Now</button>
</div>
</body>
</html>
所以,我得到的输出是 -
calcCtrl works!
opp ==> undefined
function works!
nu1 ==> 1
opp in calculateNums ==> undefined
ans ==> 0
这里的运算符值未定义..
答案 0 :(得分:0)
您可以直接在控制器中使用范围变量,这是使用角度js变量的好习惯。
我已经更新了你的答案。
<div ng-controller='calcCtrl' >
Number 1::<input Type="text" name="number1" ng-model="n1"/ required> <br/>
Number 2::<input Type="text" name="number2" ng-model="n2"/ required> <br/>
operator::<select ng-model="singleSelect">
<option value="+">+</option>
<option value="*">*</option> <-- pass value
<option value="-">-</option> <-- pass value
<option value="/">/</option> <-- pass value
</select><br/>
<button ng-click="calculateNums()">Calculate Now</button> <-- remove n1 and n2
Final answer <b>{{ans}}</b>
</div>
和控制器
var name="myApp";
requires=[];
app=angular.module(name,requires);
app.controller('calcCtrl',function($scope){
console.log("calcCtrl works!");
$scope.ans=0;
$scope.calculateNums=function(){
console.log("function works!");
console.log($scope.n1); <-- use scope variable direct here
console.log($scope.n2); <-- use scope variable direct here
console.log($scope.singleSelect); <-- use scope variable direct here
if($scope.singleSelect=="+"){
$scope.ans= (parseInt($scope.n1) + parseInt($scope.n2));
}else if ($scope.singleSelect=="-"){
$scope.ans= (parseInt($scope.n1) - parseInt($scope.n2));
}else if ($scope.singleSelect=="*"){
$scope.ans= (parseInt($scope.n1) * parseInt($scope.n2));
}else if ($scope.singleSelect=="/"){
$scope.ans= (parseInt($scope.n1) / parseInt($scope.n2));
}
console.log($scope.ans);
}
});
答案 1 :(得分:0)
您可以直接使用范围变量
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.calculateNums=function(){
alert($scope.singleSelect)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" >
<select ng-model="singleSelect" >
<option value="+">+</option>
<option value="*">*</option>
<option value="-">-</option>
<option value="/">/</option>
</select>
<button ng-click="calculateNums()">Calculate</button>
</div>
答案 2 :(得分:0)
您可以直接使用$scope
变量,而不是使用额外的变量。然后就不需要将它们作为参数。并将value
添加到select中的所有选项。
var name = "myApp";
requires = [];
app = angular.module(name, requires);
app.controller('calcCtrl', function($scope) {
var ans = 0;
$scope.singleSelect = "+"; // + will be selected by default
$scope.calculateNums = function() { // no parameters required
console.log($scope.n1);
console.log($scope.n2);
console.log($scope.singleSelect);
if ($scope.singleSelect == "+") {
ans = (parseInt($scope.n1) + parseInt($scope.n2));
} else if ($scope.singleSelect == "-") {
ans = (parseInt($scope.n1) - parseInt($scope.n2));
} else if ($scope.singleSelect == "*") {
ans = (parseInt($scope.n1) * parseInt($scope.n2));
} else if ($scope.singleSelect == "/") {
ans = (parseInt($scope.n1) / parseInt($scope.n2));
}
console.log(ans);
return ans;
}
});
&#13;
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h3>Hello</h3>
<div ng-controller='calcCtrl'>
Number 1::
<input Type="text" name="number1" ng-model="n1" / required>
<br/> Number 2::
<input Type="text" name="number2" ng-model="n2" / required>
<br/> operator::
<select ng-model="singleSelect">
<option value="+">+</option>
<option value="*">*</option>
<option value="-">-</option>
<option value="/">/</option>
</select>
<br/>
<button ng-click="calculateNums()">Calculate Now</button>
</div>
</body>
</html>
&#13;