选择标签中的 onchange 不调用函数

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 回调用于纯 DOM。

Angular 说：“当用户更改输入时评估给定的表达式。表达式会立即评估，这与 JavaScript onchange 事件不同，它仅在更改结束时触发（通常，当用户离开表单元素或按下返回键）”

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

Answer 3

使用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的实现，在处理angular时，使用scope变量。