Vincent Vincent - 4 months ago 49
AngularJS Question

ng-country-select placeholder not showing

In an Angular template, I am using the ng-country-select package to make drop down of ISO-3166 country codes. The only problem I can see is that the placeholder text is not displaying as expected.

The relevant code:

<div class="col-sm-6">
<div class="field-holder">
<country-select class="form-control"
cs-priorities="US,ES,GB,IT,CZ,DE,FR"
name="country" validate-on="dirty"
ng-model = "contact.country_code"
required-message="'Please select country.'"
placeholder="Country"
cs-required
required>
</country-select>
</div>
</div>


Any idea what I am missing here?

Answer

See this Plunker I've created for this question.

Output

Output

In your linked js file angular-country-select.js (GIT source) line number #767

change this line:

template: '<select ng-options="country.code as country.name for country in countries"> <option value="" ng-if="isSelectionOptional"></option> </select>',

to

template: '<select ng-options="country.code as country.name for country in countries"> <option value="" disabled selected>Please select country</option><option value="" ng-if="isSelectionOptional"></option> </select>',
Comments