Home > front end >  How to find which function or event is getting triggered on change of value on the select box in the
How to find which function or event is getting triggered on change of value on the select box in the

Time:04-07

<p>${Agenda Items Widget}</p>
<div id="pending-agenda-item-widget"  role="region" tabindex="0" aria-label="${Agenda Items Widget}" accessibility="{{meeting.accessible}}">
  <div  ng->
      <div >
        <label for="cab-pending-agenda-filter" >${Agenda list filter}</label>
        <select id="cab-pending-agenda-filter"  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> 
        

i want to know which function is getting triggered on change of value on the select box "cab-pending-agenda-filter" and pass adding value to the same function

CodePudding user response:

Just add an onchange directive to your select element:

<label for="cab-pending-agenda-filter" >${Agenda list filter}</label>
<select 
id="cab-pending-agenda-filter" 
 
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>

then define the assigned method in the $scope of the controller that contains the select box:

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

CodePudding user response:

Alternatively, if you just want to see if any event is assigned to the element you can:

  1. open chrome devtools
  2. inspect the 'select' element and make sure it is selected in the 'Elements' tab of devtools
  3. open the console drawer (pressing Esc) if not open already
  4. in the console input type: console.log($0.onchange)

This will output the contents of any function if assigned previously to the element onchange event.

  • Related