CODEWITHSUNDEEP
javascriptangularjsselect
thank_you
thank_you

Reputation: 11107

Angular Select Default Options

I have a select tag that may or may not have options loaded. Everything is fine when the options are provided, but whenever I want a default option to display only when no other options exist, the default option will not appear. The end result is that I have no options available. If you remove the two items in the countries variable, then you will see what I mean. What's wrong and how do I fix this?

MY FIDDLE

JS code

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

function ctrl($scope){
    $scope.countries = [
        {name: 'United States'},
        {name: 'Canada'}    
    ]     
}

HTML

<div ng-app="App" >
 <div ng-controller="ctrl">
<select multiple="" ng-multiple="true"  ng-model="country_selected"
     data-ng-options="country.name for country in countries">
    <option value="" ng-hide="countries.length == 0">No countries found</option>
</select>

  </div>       
</div>

Upvotes: 0

Views: 158

Answers (1)

jackypan1989
jackypan1989

Reputation: 2866

There are two ways:

  1. Use two selects to switch

    see an example

  2. Write a custom directive

Upvotes: 1

Related Questions