Question

我正在尝试使用html中的<select>标记创建一个下拉菜单，如下所示，

<select id="Parameter1" onchange="function1()">
  <option value = "0105" name = "Frequency">Frequency</option>
  <option value = "0106" name = "Motor Current">Motor Current</option>
</select>

我试图调用的angularJS函数如下：

$scope.function1 = function(){
  var paramId = document.getElementById("Parameter1").value; 
}

结果导致错误说明：Uncaught ReferenceError: function1 is not defined

请帮助我。

Answer 1

由于您使用的是AngularJS，因此需要使用ng-*指令：

<select id="Parameter1" ng-change="function1()">
  <option value = "0105" name = "Frequency">Frequency</option>
  <option value = "0106" name = "Motor Current">Motor Current</option>
</select>

ng-change属性是一个AngularJS指令，与您的$scope绑定并且是动态的，而onchange只是本机JavaScript事件。

大多数人都这样做：

ng-src
ng-href
ng-click

Answer 2

使用ng-change指令代替onchange，function1位于控制器的scope下。

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
  $scope.value = '0105';
  $scope.function1 = function() {
    alert($scope.value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app='myApp' ng-controller='ctrl'>
  <select id="Parameter1" ng-change="function1()" ng-model='value'>
    <option value="0105" name="Frequency">Frequency</option>
    <option value="0106" name="Motor Current">Motor Current</option>
  </select>
  {{value}}
</div>

要使用onchange，您的处理函数必须位于全局scope

下

修改：还要考虑function1的实施，在处理角度时，请使用scope变量。

Answer 3

尝试ng-change指令。 onchange回调用于纯DOM。

Angular说：＆＃34;当用户更改输入时，评估给定的表达式。表达式立即被评估，不像JavaScript onchange事件，它只在更改结束时触发（通常，当用户离开表单元素或按下返回键时）＆＃34;

看看：https://docs.angularjs.org/api/ng/directive/ngChange

select标签中的onchange不调用函数

3 个答案: