无法在其更改事件中获取角度控制器中下拉列表的选定值答案

【问题标题】：Unable to get selected value of dropdown in angular controller on its change event无法在其更改事件中获取角度控制器中下拉列表的选定值
【发布时间】：2017-12-22 01:04:48
【问题描述】：

我尝试了我找到的所有方法，但它不起作用，我只是想以 Angular js 方式获取其更改事件的下拉列表的选定选项，以便将其传递给 ajax 并从中获取数据数据库。我的项目中有 angular.min.js 1.4.8 版本的 cdn。

我将我的代码复制/粘贴到 plunker 中，它工作正常，但是在浏览器中运行我的项目时它不工作。下面是我的 JS 和 html 代码 sn-p。

JS 代码

$scope.inputs = [{
    id : 1,
    name : 'option1',
    value : 'option1',
    inputType : 'tag',
    valueOperator : "option1Operator",
    operatorType : 'operatorType1'
    }, {
    id : 2,
    name : 'option2',
    value : 'option2',
    inputType : 'text',
    valueOperator : "option2Operator",
    operatorType : 'operatorType1'
    }];
$scope.inputSelectedChange = function(){
        $scope.$watch('inputSelected',function( val ){
               $http({
                  method: 'GET',
                  url: '<<URL>>',
                  responseType: 'json',
                  params:{inputName: "prdSeqId"}
                }).then(function successCallback(response) {
                     //something
}, function errorCallback(response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                  });
});

HTML 代码

<select ng-model="inputSelected" 
        ng-options="input as input.name for input in inputs" 
        ng-change="inputSelectedChange()" required>
    <option value="">Select Input</option>
</select>

【问题讨论】：

您不必为您的 ng-change 函数使用 $scope.$watch，因为 ng-model 值将在您的控制器中可用
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
n-model 的值在有或没有 $scope.$watch 的情况下是未定义的，我两种方式都试过了。谢谢
您是否在控制台中遇到任何错误？检查下面的答案并尝试重新创建相同的代码@RohitMishra

标签： javascript jquery html angularjs ajax

【解决方案1】：

 //html
 <select ng-model="inputSelected" id="inputSelected" class="form-control positionTypes" ng-options="input as input.name for input in inputs" ng-change="inputSelectedChange(inputSelected)" required>
     <option value="">Select Input</option>
 </select>

//controller
$scope.inputSelectedChange = function(value){
  console.log(value)
};

【讨论】：

我传入了 ng-change 名称而不是 inputSelected，愚蠢的错误.. 非常感谢您的解决方案.. :)

【解决方案2】：

尝试更改如下功能：并获得价值。

$scope.inputSelectedChange = function(){
  console.log($scope.inputSelected)
  //do other stuff here
}

【讨论】：

【解决方案3】：

你可以从ng-model获取ng-change里面选中项的值

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.inputs = [{
    id : 1,
    name : 'option1',
    value : 'option1',
    inputType : 'tag',
    valueOperator : "option1Operator",
    operatorType : 'operatorType1'
    }, {
    id : 2,
    name : 'option2',
    value : 'option2',
    inputType : 'text',
    valueOperator : "option2Operator",
    operatorType : 'operatorType1'
    }];
$scope.inputSelectedChange = function(){
console.log($scope.inputSelected)
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="inputSelected" id="inputSelected" class="form-control positionTypes" ng-options="input as input.name for input in inputs" ng-change="inputSelectedChange()" required>
    <option value="">Select Input</option>
</select>
</div>

【讨论】：