CODEWITHSUNDEEP
javascriptangularjs
Steve
Steve

Reputation: 14912

Angular JS case-insensitive binding?

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>

Upvotes: 0

Views: 1334

Answers (2)

v-andrew
v-andrew

Reputation: 24181

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

Upvotes: 2

Dylan
Dylan

Reputation: 1118

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();
  });

Upvotes: 1

Related Questions