Select default value in dynamic dropdown in Angular JS

Question

This is my code what's wrong in this

<select name="countryName" class="form-control" ng-model="twoFAData.country" style="height:35px">
  <option ng-repeat="country in contriesWithCode" value="{{country[2]}}" ng-selected="accountDetailsRes.country == country[2]">{{country[1]}} ({{country[0]}})</option>
</select>

In the JS I defined this

$scope.defaultCountry = "USA";

$rootScope.accountDetailsRes = {country: $scope.defaultCountry, state: "selectstate"}; // its default country

Thanks In advance

possible a duplicate . stackoverflow.com/questions/33993468/… — sitaram9292
– sitaram9292, Commented Oct 9, 2018 at 10:38
@kapil also why r u using $rootScope? is this inside a components? — Diana R
– Diana R, Commented Oct 9, 2018 at 10:43

matuteale · Accepted Answer · 2018-10-09 14:05:35Z

1

To start, I would recommend you to use ng-options instead of ng-repeat when having many dropdown options as it performs better.

<select ng-options="country[0] as country[0].concat(' ('+country[1]+')') for 
  country in contriesWithCode" ng-model="twoFAData.country" 
  name="countryName" class="form-control" style="height:35px">
</select>

Then, if you want a default value just set $scope.twoFAData.country = 'USA' or $scope.twoFAData.country = $scope.defaultCountry.

app.controller('BaseController', function($scope) {
  $scope.defaultCountry = "USA";
  $scope.twoFAData = {};
  $scope.twoFAData.country = $scope.defaultCountry;
  $scope.contriesWithCode = [['USA', 'United States'], ['ARG', 'Argentina']];
});

answered Oct 9, 2018 at 14:05

matuteale

613 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kapil Over a year ago

code is working fine outside the pop box (modal) but not working inside popup box they can't select default value in pop up ,please provide any suggestions

matuteale Over a year ago

Please provide more information, ¿maybe some code to see your issue?

abdolmajid azad · Accepted Answer · 2018-10-09 10:46:43Z

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {

    $scope.formData = {
        people : 2

    }
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
    
    
  
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
              <select 
                ng-model="formData['people']">
              <option ng-repeat="item in people" value="{{item['id']}}">{{item['first']}}</option>

              </select>
{{people[formData['people']]['first']}}  {{people[formData['people']]['last']}} - {{people[formData['people']]['actor']}}
    </fieldset>
</div>

Collectives™ on Stack Overflow

Select default value in dynamic dropdown in Angular JS

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related