如何查找以下代码中选择框上的值更改时触发哪个函数或事件

Question

<p>${Agenda Items Widget}</p>
<div id="pending-agenda-item-widget" class="panel panel-default" role="region" tabindex="0" aria-label="${Agenda Items Widget}" accessibility="{{meeting.accessible}}">
  <div class="panel-heading heading widget-heading heading-border" ng-class="{'heading-inactive': meeting.viewingCurrent()}">
      <div class="flex">
        <label for="cab-pending-agenda-filter" class="sr-only">${Agenda list filter}</label>
        <select id="cab-pending-agenda-filter" class="sn-select-basic expand" ng-model="selectedItem" ng-init="selectedItem = CAB.PENDING" ng-disabled="page.loading" tabindex="0">
          
            <option value="{{::CAB.PENDING}}">{{::c.data.i18n.filter[CAB.PENDING]}}</option>
            <option value="{{::CAB.ALL}}">{{::c.data.i18n.filter[CAB.ALL]}}</option>
            <option value="{{::CAB.MINE}}">{{::c.data.i18n.filter[CAB.MINE]}}</option>
            <option value="{{::CAB.APPROVED}}">{{::c.data.i18n.filter[CAB.APPROVED]}}</option>
            <option value="{{::CAB.COMPLETE}}">{{::c.data.i18n.filter[CAB.COMPLETE]}}</option>
        </select> 
        

我想知道哪个功能在选择框“驾驶室待办事项”中的价值变化时会触发，然后将值添加到同一函数

Answer 1

只需将Onchange指令添加到您的选择元素：

<label for="cab-pending-agenda-filter" class="sr-only">${Agenda list filter}</label>
<select 
id="cab-pending-agenda-filter" 
class="sn-select-basic expand" 
ng-model="selectedItem" 
   ng-change="selectChanged(selectedItem)"
ng-init="selectedItem = CAB.PENDING" 
ng-disabled="page.loading" 
tabindex="0">
          
            <option value="{{::CAB.PENDING}}">{{::c.data.i18n.filter[CAB.PENDING]}}</option>
            <option value="{{::CAB.ALL}}">{{::c.data.i18n.filter[CAB.ALL]}}</option>
            <option value="{{::CAB.MINE}}">{{::c.data.i18n.filter[CAB.MINE]}}</option>
            <option value="{{::CAB.APPROVED}}">{{::c.data.i18n.filter[CAB.APPROVED]}}</option>
            <option value="{{::CAB.COMPLETE}}">{{::c.data.i18n.filter[CAB.COMPLETE]}}</option>
        </select>

然后在包含选择框的控制器的$范围中定义分配的方法：

$scope.selectChanged =  function(value) {
   // ... do stuff here when the select value is changed
}

Answer 2

或者，如果您只想查看是否有任何事件分配给该元素，您可以：

1. 打开 chrome devtools
2. 检查“select”元素并确保在 devtools 的“Elements”选项卡中选择它
3. 打开控制台抽屉（按 Esc）如果尚未
4. 在控制台中打开输入类型：console.log($0.onchange)

如果先前已分配给元素 onchange 事件，则这将输出任何函数的内容。