Appending null value in options of select tag using Angular JS

Question

While appending the option values to select tag, an empty option tag is also getting appended using Angular JS. I couldn't figure it out why it adds so. Here is my JS code

    // Create global countries array.
    $scope.countries = [];

    countryPromise.success(function(data, status, headers, config) {
        for(index in data) {
                console.log("ID:"+data[index].id+" Name:"+data[index].name);
            $scope.countries.push({
                id:data[index].id,
                name:data[index].name                   
            });
        }
        $scope.countrylist = $scope.countries;

My HTML

<select ng-model="country" ng-change="changeCountry()" ng-options="v.name for v in countrylist">

Output of console

ID:1 Name:India

Brocco · Accepted Answer · 2014-04-04 05:16:16Z

1

If your model (country) is not set to a country then you will not see a selected value initially which will show as blank row when you first open the drop down, but after selecting an item that should go away. This is of course based on the assumption that your array does not have a null value.

Added an example fiddle:

http://jsfiddle.net/65RkM/1/

<select ng-model="country" ng-options="c.name for c in countrylist"></select>

edited Apr 4, 2014 at 5:16

answered Apr 4, 2014 at 5:05

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sjdaws Over a year ago

Doh! Of course, add $scope.country = $scope.countrylist[0] after $scope.countrylist = $scope.countries; to select the first country in the list by default.

Brocco Over a year ago

@sjdaws that logic would solve the issue, but that might not be the desired business logic to apply & I updated my answer with some code to illustrate

Nizam Ali Over a year ago

@Brocco, in your fiddle, still the first value is null.

sjdaws · Accepted Answer · 2014-04-04 05:00:17Z

0

Most likely a blank record is being returned from your database. The simplest solution would be to check index for blanks.

// Create global countries array.
$scope.countries = [];

countryPromise.success(function(data, status, headers, config) {
    for(index in data) {
        if (data[index].id) {
            $scope.countries.push({
                id:data[index].id,
                name:data[index].name                   
            });
        }
    }
    $scope.countrylist = $scope.countries;

answered Apr 4, 2014 at 5:00

sjdaws

3,55619 silver badges21 bronze badges

5 Comments

Nizam Ali Over a year ago

No. There is no blank record. Should I change anything in the html code?

sjdaws Over a year ago

Try adding an if clause to skip blank records like above, see if that fixes it. I use the exact same method as you did originally and don't get blank records so it has to be something funky. Did you try console.log(data) to check if there were absolutely no blank records?

Nizam Ali Over a year ago

No. That doesn't fix. I'm pretty sure that there is only one record and I could see in console when I print it.

sjdaws Over a year ago

Can you edit your original post with the output of console.log(data)?

sjdaws Over a year ago

Yeah, @Brocco was onto it, I've commented on his correct answer.

Collectives™ on Stack Overflow

Appending null value in options of select tag using Angular JS

My HTML

Output of console

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My HTML

Output of console

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related