Initializing select with AngularJS and ng-repeat

Question

I m trying to get select-box to start off with a pre-filled option using ng-repeat with AngularJS 1 1 5  Instead the select always starts out with nothing selected  It also has an empty option  which I don t want  I think that there is a side effect of nothing being selected   I can get this working using ng-options instead of ng-repeat  but I want to use ng-repeat for this case  Although my narrowed down example doesn t show it  I also want to set the title attribute of each option  and there is no way to do that using ng-options  as far as I know   I don t think this is related to the common AngularJs scope prototypical inheritance issue  At least I don t see anything obvious when inspecting in Batarang  Plus  when you pick an option in the select with the UI  the model does update correctly   Here s the HTML    lt body ng-app ng-controller  AppCtrl  gt       lt div gt          Operator is    filterCondition operator        lt  div gt       lt select ng-model  filterCondition operator  gt          lt option             ng-repeat  operator in operators              value    operator value            gt               operator displayName           lt  option gt       lt  select gt   lt  body gt    And the JavaScript   function AppCtrl  scope          scope filterCondition           operator   eq              scope operators              value   eq   displayName   equals             value   neq   displayName   not equal              JS Fiddle for this   http   jsfiddle net coverbeck FxM3B 2

User · Answer

The fact that angular is injecting an empty option element to the select is that the model object binded to it by default comes with an empty value in when initialized.

If you want to select a default option then you can probably can set it on the scope in the controller

$scope.filterCondition.operator = "your value here";

If you want to an empty option placeholder, this works for me

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

User · Answer

OK  If you don t want to use the correct way ng-options  you can add ng-selected attribute with a condition check logic for the option directive to to make the pre-select work    lt select ng-model  filterCondition operator  gt       lt option ng-selected    operator value    filterCondition operator                ng-repeat  operator in operators              value    operator value    gt          operator displayName        lt  option gt   lt  select gt    Working Demo

User · Answer

For the select tag  angular provides the ng-options directive  It gives you the specific framework to set up options and set a default  Here is the updated fiddle using ng-options that works as expected  http   jsfiddle net FxM3B 4   Updated HTML  code stays the same     lt body ng-app ng-controller  AppCtrl  gt   lt div gt Operator is    filterCondition operator   lt  div gt   lt select ng-model  filterCondition operator  ng-options  operator value as operator displayName for operator in operators  gt   lt  select gt   lt  body gt

User · Answer

As suggested you need to use ng-options and unfortunately I believe you need to reference the array element for a default  unless the array is an array of strings    http   jsfiddle net FxM3B 3   The JavaScript   function AppCtrl  scope           scope operators              value   eq   displayName   equals             value   neq   displayName   not equal                scope filterCondition           operator   scope operators 0            The HTML    lt body ng-app ng-controller  AppCtrl  gt   lt div gt Operator is    filterCondition operator value   lt  div gt   lt select ng-model  filterCondition operator  ng-options  operator displayName for operator in operators  gt   lt  select gt   lt  body gt

User · Answer

Thanks to TheSharpieOne for pointing out the ng-selected option  If that had been posted as an answer rather than as a comment  I would have made that the correct answer   Here s a working JSFiddle  http   jsfiddle net coverbeck FxM3B 5    I also updated the fiddle to use the title attribute  which I had left out in my original post  since it wasn t the cause of the problem  but it is the reason I want to use ng-repeat instead of ng-options    HTML    lt body ng-app ng-controller  AppCtrl  gt   lt div gt Operator is    filterCondition operator   lt  div gt   lt select ng-model  filterCondition operator  gt      lt option ng-repeat  operator in operators  title    operator title    ng-selected    operator value    filterCondition operator    value    operator value    gt   operator displayName   lt  option gt   lt  select gt   lt  body gt    JS   function AppCtrl  scope          scope filterCondition           operator   eq              scope operators              value   eq   displayName   equals   title   The equals operator does blah  blah             value   neq   displayName   not equal   title   The not equals operator does yada yada

User · Answer

If you are using md-select and ng-repeat ing md-option from angular material then you can add ng-model-options   trackBy    value id    to the md-select tag ash shown in this pen   Code    x000D   x000D   lt md-select ng-model  user  style  min-width  200px   ng-model-options   trackBy    value id    gt  x000D     lt md-select-label gt    user   user name    Assign to user     lt  md-select-label gt  x000D     lt md-option ng-value  user  ng-repeat  user in users  gt   user name   lt  md-option gt  x000D   lt  md-select gt  x000D   x000D   x000D

[javascript] Initializing select with AngularJS and ng-repeat

Examples related to javascript

Examples related to angularjs