Set default Value select AngularJS

Question

I populate my select with an external json-file. Everything works fine. But how can I set the default value of my select? I want to set it to "United States", one of my option-value, which is loaded from the json-file countries.json.

I´ve tried to do it like this:

 ng-init="selectionCountry = options['United States']

or with a no., because the States are on the first position...

ng-init="selectionCountry = options[0]

But, it do not work. Any tips?

HTML

<select id="country" class="form-control country" ng-model="selectionCountry">
    <option value="" ng-options="country in data.locations.countries | orderBy:'name'">{{country.name}}</option> 
</select>

SCRIPT

.controller('NewInvoiceCtrl', ['$scope', '$translate', '$modal', '$window', '$filter', '$http', '$timeout',
function($scope, $translate, $modal, $window, $filter, $http, $timeout) {

    // load and populate Json in country select
    $scope.data = {
        "locations": {}
    };

    $http.get('l10n/countries.json')
      .then(function(res) {
        $scope.data.locations.countries = res.data;
        $scope.$$phase || $scope.$apply();
        // set default
        $scope.selectionCountry = $scope.data.locations.countries[1];
      });
 }])

EXAMPLE JSON

  {
    "alpha2": "US",
    "alpha3": "USA",
    "countryCallingCodes": [
      "+1"
    ],
    "currencies": [
      "USD"
    ],
    "ioc": "USA",
    "name": "United States",
    "status": "assigned"
  },

The values of your select are the elements of the array data.locations.countries. Why do you think setting the selected value to options['United States'] or options[0] would work? Wouldn't it be much more logical to set it to data.locations.countries[0]? — JB Nizet
– JB Nizet, Commented May 31, 2014 at 15:35
Would you mind sharing your countries.json? I expect I like others an in need of a similar file and maybe we could put one up on github to share & maintain? — KGolding
– KGolding, Commented Sep 21, 2014 at 22:59

potatosalad · Accepted Answer · 2014-05-31 18:10:42Z

You could use the ngOptions directive and run the orderBy filter in the controller instead:

HTML

<select id="country" class="form-control country" ng-disabled="!data.locations.countries.$resolved" ng-model="selectionCountry" ng-options="country.name for country in data.locations.countries">
</select>

Controller

controller("NewInvoiceCtrl", function ($scope, $http, $filter) {
  $scope.data = {
    locations: {
      countries: []
    }
  };

  $scope.data.locations.countries.$resolved = false;

  $http.get('countries.json').success(function(countries) {
    $scope.data.locations.countries.length = 0;
    Array.prototype.push.apply($scope.data.locations.countries, $filter('orderBy')(countries, 'name'));
    $scope.selectionCountry || ($scope.selectionCountry = $scope.data.locations.countries[1]);
    $scope.data.locations.countries.$resolved = true;
  });
});

Additionally, adding a $resolved field allows you to disable the field until the countries list has been populated (this is similar to what $resource does).

Here's a working example: http://plnkr.co/edit/vuKsqU5q52s7pfOPcGLI?p=preview

Alternatively, if you want to select the default based on the name:

$scope.data.locations.countries.$default = 'United States';

// when setting $scope.selectionCountry
$scope.selectionCountry = $filter('filter')($scope.data.locations.countries, {name: $scope.data.locations.countries.$default})[0];

Here's an example of the "by name" filter: http://plnkr.co/edit/Czy53cTfptPdyAPBr3eS?p=preview

jessegavin · Accepted Answer · 2014-05-31 15:37:40Z

0

It seems like this should work. I am not sure why you were calling $scope.$apply()

$http.get('l10n/countries.json')
  .then(function(res) {
    $scope.data.locations.countries = res.data;
    $scope.selectionCountry = $scope.data.locations.countries[0];
  });

answered May 31, 2014 at 15:37

jessegavin

75.9k28 gold badges141 silver badges165 bronze badges

1 Comment

mm1975 Over a year ago

Hi jessegavin, thank you for your solution. Unfortunately, the select remains on first option. And the first (default) option is empty.

Collectives™ on Stack Overflow

Set default Value select AngularJS

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related