0

I have a select menu that displays data from a json file, countries of the world by name.

I have a text field next to it which is bound to it and displays the iso 3166 alpha_2 data (e.g. CH for Switzerland).

Also, the user can enter the 2-character code and the correct name in the menu shows up.

enter image description here

My issue is that the user needs to type the alpha_2 value in uppercase to match. Using my example above, typing "CH" works but "ch" shows no matches in the menu.

Is there a way to get around this?

  <td>
     <input type="text" size="4" ng-model="country_import.alpha_2">
  </td>
  <td>
     <select ng-model="country_import" ng-options="s.name for s in iso3166 track by s.alpha_2" class="form-control input-xs country-menu"></select>
  </td>
Steve
  • 14,401
  • 35
  • 125
  • 230
  • you can autocapitalize it. refer to this http://stackoverflow.com/questions/15242592/how-to-autocapitalize-an-input-field – A.J. May 03 '16 at 20:45

2 Answers2

2

Just use .toUpperCase() on the track by variable

<select ng-model="country_import" ng-options="s.name for s in iso3166 track by s.alpha_2.toUpperCase()" class="form-control input-xs country-menu"></select>

Here is plunker for similar case: https://plnkr.co/edit/pESocfNey55uZb85RgDE?p=preview

v-andrew
  • 21,939
  • 6
  • 36
  • 41
1

I would setup a watch on that, and turn everything a user types into Upper Case.

  $scope.$watch('country_import.alpha_2', function() {
        $scope.country_import.alpha_2 = $scope.country_import.alpha_2.toUpperCase();
  });
Dylan
  • 1,068
  • 12
  • 25