Angularjs, select Box create blank option at first always

Question

I got some problems with selectbox.

In my original code, I receive an object through $http calling, and that is like below.

[
    {key:'user_id', value:'ID'},
    {key:'user_name', value:'Name'},
    {key:'user_gender', value:'Gender'},
    {key:'user_phone', value:'Phone'},
    {key:'user_email', value:'Email'},
    {key:'user_birth', value:'Birthday'},
];

When I tried to put values of this object into option, it made 'blank option' automatically.

To solve this, I saw two posts

Angular JS Remove Blank option from Select Option

Why does AngularJS include an empty option in select?

but any solutions of these could not help me.

How can I fix this?

Here's my fiddle.

Select box create blank option

I'll wait some handsome or pretty developers who will solve my problem. :)

Manoj Patidar · Accepted Answer · 2017-09-21 05:05:36Z

4

Try This

HTML Code -

<select ng-options="opt as opt.value for opt in searchOpt.option" ng-model="searchOpt.selected">
    </select>

The ngOptions attribute can be used to dynamically generate a list of elements for the element using the array or object obtained by evaluating the ngOptions comprehension expression

Working Jsfiddle

edited Sep 21, 2017 at 5:05

answered Sep 21, 2017 at 4:17

Manoj Patidar

1,1712 gold badges11 silver badges29 bronze badges

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

4 Comments

Canet Robern Over a year ago

oh my... you just saved someone's life.. thanks! But I got a question. Now, select box default value is last value of option. I want to set first value to default. can you fix this too?

Manoj Patidar Over a year ago

Please go through this link will resolved your issue docs.angularjs.org/api/ng/directive/ngOptions

Manoj Patidar Over a year ago

@CanetRobern : I've update the Ans. please look into this. hope this will resolve your issue jsfiddle.net/3pp61gny/9

Canet Robern Over a year ago

I don't know why your fiddle works fantastic, but not mine.. T.T

Mahfuz Shishir · Accepted Answer · 2017-09-21 03:51:50Z

3

<select ng-model="itemSelected">
  <option
      ng-repeat="item in data" value="{{ item.key }}"
      ng-selected="{{item.key === itemSelected}}">
    {{ item.value }}
  </option>
</select>

https://plnkr.co/edit/QthDhkvku8UvcVHaWcGG?p=preview

Check the code. Use ng-selected in your option for selected first element.

answered Sep 21, 2017 at 3:51

Mahfuz Shishir

8411 gold badge8 silver badges25 bronze badges

1 Comment

Canet Robern Over a year ago

thanks to your suggestion, but I think my problem has occurred by using $q. If put $q into your code, maybe same problem will occur.

Collectives™ on Stack Overflow

Angularjs, select Box create blank option at first always

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related