AngularDART Event Handling when option is selected from dropdown menu

Issue

I’ve a simple select statement, where I want to read the selected value, and send it to a function in the controller upon select change, I was able to read the index and able to display/read it in the select, but the on-change function keep sending 0 to the function:

my select HTML is:

<select ng-change="TodoCtrl.printit(ng-value)">
  <option ng-value=""></option>
  <option ng-repeat="todo in TodoCtrl.todos" ng-value={{$index}}>
    {{$index}} is {{todo.text}}
  </option>
</select>

and the function in the controller is:

void  printit(num i){
print('id selected is: $i');
}

Can anyone hlp me here pls.

thanks

Solution

Thanks, I noticed the following:

1. ng-modle is required to be used
2. value (not ng-value) is required to be used
3. FUTURE is required to be used, luckily this answer helped me
4. {{$index}} is a String, not an integer, so it is required to be converted into integer in the function to be able to process it as integer, using int.parse()

so, the working code with me was:
in HTML file:

<select ng-change="TodoCtrl.printit()" ng-model="TodoCtrl.selectedIndex">
  <option ng-value=""></option>
  <option ng-repeat="todo in TodoCtrl.todos" value={{$index}}>
    {{$index}} is {{todo.text}}
  </option>
</select>

and the function in the controller was:

void  printit(){   
 new Future(() { 
  selectedText=todos[int.parse(selectedIndex)].text;
  print('id with future selected is: $selectedIndex and the value is $selectedText');
  switch(int.parse(selectedIndex)){
    case 0:
      print('String 0');
      break;
    case 1:
      print('String 1');
      break;
    default:
      print('default');
      break;
   }
   });
  }

the above worked perfectly with me, is this the perfect approach, or this is a kind of work around!!

any thought!

Answered By – Hasan A Yousef

Answer Checked By – Mary Flores (FlutterFixes Volunteer)