Default for ng-select not working

Question

I have a form using a select. I'm trying to set a default value, which I want to disable, so the dropdown will show "-- select state --" as the first option and will force the user to make a selection.

My problem is it's not working and the select always starts out blank.

Here is my code:

    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
      <option ng-disabled="$index === 1"  ng-selected="true">--Select State--</option>
      <option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
    </select>

$index doesnt have value ng repeat start in the next line in your code — Avihay m
– Avihay m, Commented Aug 28, 2017 at 14:36

Naren Murali · Accepted Answer · 2017-08-28 14:43:48Z

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

Taken from here

So I'd suggest writing it like this.

var app = angular.module('myApp', []);

// Register MyController object to this app
app.controller('MyController', function MyController($scope) {
    this.addressData = {state: "--Select State--"};
    this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'>
    <select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
      <option value="--Select State--">--Select State--</option>
      <option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
    </select>
</div>

Maxim Shoustin · Accepted Answer · 2017-08-28 14:52:44Z

2

Check this one with default <option> and ng-options:

 <select ng-model="contactEditCtrl.addressData.state" 
         ng-options="state.name as state.name for state in contactEditCtrl.states" >
      <option value="" ng-disabled="true">-- select state --</option>
</select>

Demo fiddle

It will be converted to:

<select ng-model="addressData.state" style="width: 50%;" 
        ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty">
    <option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option>
    <option value="0">CCCCC</option>
    <option value="1">QQQQQQ</option>
</select>

edited Aug 28, 2017 at 14:52

answered Aug 28, 2017 at 14:38

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

2 Comments

cnak2 Over a year ago

Hi Maxim, that works, but how do I set the state.abbreviation as the value passed. When I add state.abbreviation to the "value" field it breaks the select.

Maxim Shoustin Over a year ago

@cnak2 can you please edit my demo with your changes?

Collectives™ on Stack Overflow

Default for ng-select not working

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related