Search code examples
javascriptangularjsselectangularjs-directiveangularjs-ng-options

How to pre-select a select option in an Angularjs select that's filled with ng-options

I have the following select that is filled with all the countries in the world, I have an Angularjs controller that calls a method that returns me the idCountry of one of those countries that variable idCountry is the id of the object and not the index of the position that object takes in the select.

I need to pre-select that country in the select using the idCountry, is there a way to get the index that this object has in the select using the id of the object, I read some articles saying that this can be done using track by in the ng-options expression but I don't know how.

If I manage to get the index I could pre-select the option like this 

$scope.countriesSelect = $scope.countriesSelect[put here the select index that I can find]

Here is my select 

<select name="selectCountries" class="form-control" 
                                        id="selectCountries" 
                                        ng-model="selectCountries"
                                        ng-options="country.name for country in countryList track by country.idCountry" 
                                        ng-change=""
required>
</select>

and here is what I was trying to do in my Controller

var idCountry = id;
$scope.selectCountries= $scope.selectCountries[idCountry]

EDIT

I edited my code, I have read similar questions but most of the questions are about how to initialize a select with a default value, I'm trying to do an edit page where the user can check all the values that he put during his registration, and he can edit them so, this select needs to be initialized with the value that he selected.

I can get the id of any object of the list of objects

here is the list of objects that populates my select 

[{idCountry: 2, name: countryName}, {idCountry: 4, name: AnothercountryName}, {idCountry: 7, name: rockyCOuntry}]

I have a method that returns me the idCountry and I want to know if there's a way to get the index of the select using this idCountry or by putting some expression in my ng-options expression like using track by or something.

I tried this $scope.selectCountries= $scope.selectCountries[idCountry] but this doesn't return me the correct country if I put 7 instead of setting the select in rockyCOuntry it sets the select in another country, I believe that is because the id of the list object doesn't correspond with the same index of the select that occupies that object.

Solution

  • Well, keep in mind your ng-model actually is an object, so you can't set directly the countryId of <option>. To achieve what you want, since you have already the id, you must do something like this in your controller:

    var selectedId = 7; // Just an example

$scope.selectCountries = { "idCountry": selectedId };

    On other hand, if you don't want to set whole object in ngModel, just the idCountry (which I don't recommend), you can do the following:

    $scope.selectCountries = 7; // Just an example

<select name="selectCountries" class="form-control" id="selectCountries" ng-model="selectCountries" ng-options="country.idCountry as country.name for country in countryList" required>
 </select>

    Demo:

    (function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.countryList = [  
         {  
            "idCountry":2,
            "name":"countryName"
         },
         {  
            "idCountry":4,
            "name":"AnothercountryName"
         },
         {  
            "idCountry":7,
            "name":"rockyCOuntry"
         }
      ];

      $scope.selectCountries = {
        "idCountry": 7
      };
      // $scope.selectCountries = 7;
    });
})();
    <!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <select name="selectCountries" class="form-control" id="selectCountries.id" ng-model="selectCountries" ng-options="country.name for country in countryList track by country.idCountry" required>
  </select>
  <pre ng-bind="selectCountries | json"></pre>
</body>

</html>

    Note: Both ways give you the expected result.

    I hope it helps.