1

Here is my html code

<select ng-model="something"  ng-options="availThing.description for availThing in availableThings >
     <option value="">-- select field --</option>
</select>

What I want to do is in some select element, by default display certain tag not "--select field --".

And I cannot default the value of ng-model.

How should I set that?

Baoyun Chen
  • 281
  • 1
  • 5
  • 17
  • *by default display certain tag not select field* what do you mean by that? – Ghasem Oct 02 '15 at 06:30
  • Possible duplicate http://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element – ste2425 Oct 02 '15 at 06:30
  • @AlexJolig Sorry, my bad. I mean I have a extra option "--select fileld--". I want some of my select box display other tag rather than this one by default. – Baoyun Chen Oct 02 '15 at 06:32
  • @ste2425 actually not because in my case I can't default the value of ng-model. Thank for replying. – Baoyun Chen Oct 02 '15 at 06:34

3 Answers3

0

Why not using ng-repeat ?

 <select>
  <option value="somthing">-- select field --</option>
  <option ng-repeat="availThing in availableThings" value="{{availThing.description}}">
   {{availThing.description}}
  </option>
 </select>
Ghasem
  • 14,455
  • 21
  • 138
  • 171
0

You can prefill a valid option by setting the ng-model to an item from the collection.

However if you set it to an item that is not in that collection your ng-model will remain set but the item will not appear in the dropdown options, or appear to be visually set.

The final option that ive done in the past is similar to yours. However i found that even when the user had selected an option that select option selection was still available. Adding an ng-if was the solution. 

<select ng-model="selected3" ng-options="item for item in items">
    <option value="" ng-if="!selected3">-- select field --</option>
</select>

This will show the element only if you havent selected an option. Using ng-if and not ng-show/hide means the element is removed from the DOM so you can't accidentally select it with CSS etc.

see fiddle: http://jsfiddle.net/hd89kds6/1/

ste2425
  • 4,656
  • 2
  • 22
  • 37
0

You have to check ng-model. If you want to select by default value then no need to define $scope.something variable. Below code are working fine.

<select ng-model="selectedName" ng-options="item for item in names">
<option value="">-- select field --</option>
</select>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
Ramu Agrawal
  • 518
  • 6
  • 9