如何将选择值输入控制器答案

【问题标题】：How to get the select value into the controller如何将选择值输入控制器
【发布时间】：2017-12-05 14:46:47
【问题描述】：

我正在尝试使用 Angularjs 创建一个简单的计算器，在我的代码中我无法获取运算符值。我该如何解决这个问题？

主页html包含获取两个数字和操作员。用户必须选择操作员..

我的代码 -

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

此处的操作符值未定义..

【问题讨论】：

其他选项似乎也需要价值。
您缺少其他选项值

标签： javascript html angularjs

【解决方案1】：

将value attr 添加到其他选项

<select ng-model="singleSelect">
        <option value="+">+</option>
        <option value="*">*</option>
        <option value="-">-</option>
        <option value="/">/</option>
</select></p> <br/>

【讨论】：

仍然得到相同的输出。

【解决方案2】：

您可以直接在控制器中使用范围变量，使用 Angular 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);
     }
});

【讨论】：

【解决方案3】：

你可以直接使用作用域变量

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>

【讨论】：

【解决方案4】：

您可以直接使用$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;
    }
});

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

【讨论】：