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

时间:2017-07-17 13:07:04

标签: javascript jquery html angularjs ajax

我尝试了所有我找到的方式,但是它没有工作,我只是简单地尝试以角度js方式选择其变化事件的下拉列表,以便将其传递给ajax并且从数据库中获取数据。我的项目中有angular.min.js 1.4.8版cdn。

我将我的代码复制/粘贴到plunker中,工作正常,但在浏览器中运行我的项目时却无法正常工作。下面是我的JS和html代码片段。

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>

3 个答案:

答案 0 :(得分:0)

尝试更改功能,如下所示: 并获得价值。

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

答案 1 :(得分:0)

您可以从ng-change

获取ng-model内所选项目的值

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>

答案 2 :(得分:0)

 //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)
};