How to select default dropdown option in angularjs?

Question

how to select dropdown in angularjs ?

How to select default dropdown option for "Third Project 456"

Please Check :jsfiddle

HTML:

<select ng-change="getMileWorkerlist(broadcastManagerData.project_list)" ng-model="broadcastManagerData.project_list" name="project_list" class="form-control" required >
<option value="0">All Project</option>
<option ng-repeat="(key, value) in projectList" ng-value="key">{{value}}</option>
</select>

JAVASCRIPT:

$scope.projectList = {
35: "Third Project 456",
56: "Project-11-1-2016",
76: "test project for cbs"
};
$scope.broadcastManagerData.project_list =35;

Make my html in view source:

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" required="" name="project_list" ng-model="broadcastManagerData.project_list" ng-change="getMileWorkerlist(broadcastManagerData.project_list)">
<option value="? number:35 ?"></option>
<option ng-selected="true" ng-value="0" value="0" selected="selected">All Project</option>
<option class="ng-binding ng-scope" ng-value="key" ng-repeat="(key, value) in projectList" value="35">Third Project 456</option>
<option class="ng-binding ng-scope" ng-value="key" ng-repeat="(key, value) in projectList" value="56">Project-11-1-2016</option>
<option class="ng-binding ng-scope" ng-value="key" ng-repeat="(key, value) in projectList" value="76">test project for cbs</option>
</select>

OUTPUT:

Please Check :jsfiddle

try something like ng-init="broadcastManagerData.project_list = projectList[0]" .. so index 0 in projectList, write this after ng-repeat. See ng-init — sch
– sch, Commented Feb 10, 2016 at 6:40
it's not working..i know this thing. but, something wrong in this case. — Bharat Chauhan
– Bharat Chauhan, Commented Feb 10, 2016 at 7:12
It's Wroking: <option ng-repeat="(key, value) in projectList" value="{{key}}">{{value}}</option> — Bharat Chauhan
– Bharat Chauhan, Commented Feb 10, 2016 at 7:57

sch · Accepted Answer · 2016-02-10 07:16:51Z

1

Well I know why my comment was not working, I assumed (didn't read question carefully) that you were working with an array, and you're not. I do not know how to do it using (key, value), but why are you not using an array? If you were, this would work:

<select ng-change="getMileWorkerlist(broadcastManagerData.project_list)"
  ng-model="broadcastManagerData.project_list"
  ng-init="broadcastManagerData.project_list = projectList[0].key" 
  name="project_list"  class="form-control" required 
  ng-options="item.key as item.value for item in projectList">
</select>

and in controller, the array:

$scope.projectList = [
    {key: 35, value: "Third Project 456"},
    {key: 56, value: "Project-11-1-2016"},
    {key: 76, value: "test project for cbs"}
];

But as I said, seems like this way only works with an array. Any reason why you can't do it this way?

answered Feb 10, 2016 at 7:16

sch

1,3985 gold badges20 silver badges39 bronze badges

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

3 Comments

sch Over a year ago

I forked your fiddle to use my code: jsfiddle.net/q1fpny5j .. But you must understand that I changed the projectList to become an array using [ ] instead of { }

Bharat Chauhan Over a year ago

Friends i have not use "ng-options"

Bharat Chauhan Over a year ago

It's Wroking: <option ng-repeat="(key, value) in projectList" value="{{key}}">{{value}}</option>

Dmytro Zaverukha · Accepted Answer · 2016-02-10 07:47:29Z

1

<div ng-app="myApp" ng-controller="Ctrl" ng-init="broadcastManagerData.project_list = 'Third Project 456'">
     <select ng-model="broadcastManagerData.project_list"  >
      <option value="0">All Project</option>
      <option ng-repeat="(key, value) in projectList" ng-value="value" ng-selected="value=='Third Project 456'">{{value}}</option>
    </select>
    {{broadcastManagerData.project_list}}
</div>

edited Feb 10, 2016 at 7:47

answered Feb 10, 2016 at 6:41

Dmytro Zaverukha

561 silver badge3 bronze badges

2 Comments

Bharat Chauhan Over a year ago

it's not working..i know this thing. but, something wrong in this case.

Bharat Chauhan Over a year ago

It's Wroking: <option ng-repeat="(key, value) in projectList" value="{{key}}">{{value}}</option>

sufinsha · Accepted Answer · 2016-02-10 07:00:52Z

0

Please check if the below will help:

<option ng-repeat="(key, value) in projectList" ng-value="key" ng-selected="value == 'Third Project 456'">{{value}}</option>

edited Feb 10, 2016 at 7:00

answered Feb 10, 2016 at 6:52

sufinsha

7656 silver badges9 bronze badges

3 Comments

Bharat Chauhan Over a year ago

it's not working..i know this thing. but, something wrong in this case.

Bharat Chauhan Over a year ago

It's Wroking: <option ng-repeat="(key, value) in projectList" value="{{key}}">{{value}}</option>

sufinsha Over a year ago

@BharatChauhan In the fiddle, you didn't add the ng-selected directive.

Bharat Chauhan · Accepted Answer · 2016-02-10 08:04:04Z

0

<select ng-change="getMileWorkerlist(broadcastManagerData.project_list)" ng-model="broadcastManagerData.project_list" name="project_list" class="form-control" required >
<option value="0">All Project</option>
<option ng-repeat="(key, value) in projectList" value="{{key}}">{{value}}</option>
</select>

answered Feb 10, 2016 at 8:04

Bharat Chauhan

3,3445 gold badges41 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to select default dropdown option in angularjs?

4 Answers 4

3 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related