CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-select
cnak2
cnak2

Reputation: 1841

Default for ng-select not working

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>

Upvotes: 0

Views: 2594

Answers (2)

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

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>

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 58104

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>

Upvotes: 2

Related Questions