AngularDART Event Handling when option is selected from dropdown menu - select

Question

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

Answer 1

You probably should use a model rather than trying to handle the change event. Check the unit tests for sample code.
What you see is the result of ng-value being an undefined variable in the context of the event. There is no ng-value variable defined in this snippet at all. The directive ng-value does not define a variable.
The ng-value directive is to be used to assigned an arbitrary value (ie an object) as the option value. In this code options values are plain string and a vanilla value attribute should be used.

Answer 2

Thanks, I noticed the following:
ng-modle is required to be used
value (not ng-value) is required to be used
FUTURE is required to be used, luckily this answer helped me
{{$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!