CODEWITHSUNDEEP
angularjs
Raza
Raza

Reputation: 3383

AngularJS - Dropdown doesn't show selected option

I have this select dropdown with "Enbridge Billing" selected.

<select class="form-control required ng-pristine ng-valid" ng-model="finance.payment_method" id="payment_method" name="payment_method">
    <option value=""></option>
    <option value="EGD" selected="selected">Enbridge Billing</option>
    <option value="PAPP">PAD Billing</option>
</select>

However, on screen, it's not selected:

Empty Select dropdown

I've removed all the stuff from app.js and still the problem presists:

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

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('%%');
    $interpolateProvider.endSymbol('%%');
});

app.controller('NewJobFinanceController',
    function ($scope) {


    });

Edit:

I just did this in the controller:

$scope.finance.payment_method = $('#payment_method').find(':selected').val();

Upvotes: 3

Views: 5214

Answers (2)

Rahul
Rahul

Reputation: 211

Simply use ng-selected="true" instead of selected="selected".

Upvotes: 2

JB Nizet
JB Nizet

Reputation: 691625

The single point of truth in angular is the model. Not the view. You update the model, and the view updates itself to reflect the state of the model.

You configured the select box as

<select ng-model="finance.payment_method" ...>

So that means that the currently selected value is finance.payment_method. That's where angular gets the selected value. Since it's undefined, you have a blank select box.

BTW, you should not set, required, ng-pristine and ng-valid as class of your select box. angular will add and remove this classes by itself, depending on the actual state of the form control.

Upvotes: 4

Related Questions