AngularJS - default value in selectbox

Question

I have a problem with default value in select element. I have form for create new item and update from table. Here is my code:

Controller:

function MyController($scope){
  $scope.data = {};
  $scope.selectedItem = null; //selected row from table

  this.edit = function(){
    $scope.enableEditation = true; // displayed editation form
    $scope.data = $scope.selectedItem
  }

}

HTML:

<select required ng-model="data.ID" class="form-control">
   <option ng-repeat="option in types" value="{{option.ID}}" ng-selected="option.ID == data.ID">{{option.ID}} - {{option.NAME}}</option>
</select>

Default value is allways empty. Generated html in browser is:

<select class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" required="" ng-model="data.ID">
  <option selected="selected" value="? number:4 ?"></option>
  <option class="ng-binding ng-scope" value="4" ng-repeat="option in types" ng-selected="option.ID == data.ID">4 - First</option>
  <option class="ng-binding ng-scope" value="12" ng-repeat="option in types" ng-selected="option.ID == data.ID">12 - Last</option>
</select>

Where can be problem? Thanks for advices.

I updated my question.

bluray
– bluray

2018-05-03 08:10:01 +00:00
Commented May 3, 2018 at 8:10 — bluray
– bluray, Commented May 3, 2018 at 8:10

marc_s · Accepted Answer · 2018-05-12 06:58:30Z

1

Your problem is that your adding the value to the options trough

"value={{option.id}}"

This will always result in type conflict when your working with non-string values, since doing so will convert your id to a string, your simplest solution is to use "ng-value" instead and give it as reference:

"ng-value="option.id"

edited May 12, 2018 at 6:58

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 3, 2018 at 8:16

roy

6056 silver badges14 bronze badges

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

2 Comments

bluray Over a year ago

Thanks. It works. But i must change ng-select="data.ID" too.

roy Over a year ago

yea indeed conflict with ngModel

Tan Duong · Accepted Answer · 2018-05-03 08:13:05Z

1

You just replace ng-selected="option.ID == data.ID" to ng-selected="data.ID"

<select required ng-model="data.ID" class="form-control">
   <option ng-repeat="option in types" value="{{option.ID}}" ng-selected="data.ID">{{option.ID}} - {{option.NAME}}</option>
</select>

See the document https://docs.angularjs.org/api/ng/directive/ngSelected

answered May 3, 2018 at 8:13

Tan Duong

2,1421 gold badge12 silver badges17 bronze badges

1 Comment

bluray Over a year ago

It doesnt works. I think problem is in generated html. Angular add this row: <option selected="selected" value="? number:4 ?"></option>

Collectives™ on Stack Overflow

AngularJS - default value in selectbox

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related