Dropdown menu text doesn't display when set a default value - AngularJS

Question

I have a select menu.

<select id="dd" ng-show='data != null' ng-model='search'></select>

I triggered the filter to USA as default

$scope.search = 'United States of America';

So far the filter seem to work, but none of my jQuery seem to work.

$scope.search = 'United States of America';
$("#dd").val('United States of America');
$("#dd").attr("selected","selected");

You may see what I have here : JSFiddle

Result now :

Result I want it to be :

What else I should look into to debug this further ?

I am using Chrome.

code-8
– code-8

2017-03-07 21:53:05 +00:00
Commented Mar 7, 2017 at 21:53 — code-8
– code-8, Commented Mar 7, 2017 at 21:53

ISHIDA · Accepted Answer · 2017-03-08 14:42:57Z

2

I would do like this-

In your angular controller

$scope.timeFrames = [{ "id": 1, "name": "USA" }, { "id": 2, "name": "UK" }, { "id": 3, "name": "China" }];
$scope.selectedTimeFrame = 1;

In you html page

 <select ng-model="selectedTimeFrame" ng-change="frame()" ng-options="timeFrame.id as timeFrame.name for timeFrame in timeFrames" ng-cloak></select>

Trying to control the select drop down through java script is not the correct way to do. In angular, we have ng-options, Please refer to this documentation.

edited Mar 8, 2017 at 14:42

answered Mar 7, 2017 at 21:49

ISHIDA

4,8882 gold badges18 silver badges31 bronze badges

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

2 Comments

code-8 Over a year ago

Can you please update your answer and explain in details a little bit ?

ISHIDA Over a year ago

Please refer to this documentation about ng-options

Collectives™ on Stack Overflow

Dropdown menu text doesn't display when set a default value - AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related