ng-repeat in a select create empty rows/options

Question

I've 2 problems with ng-repeat. I'm tring to set 2 selects:

• one for the countries
• one for the cities of the country selected

When I get my countries list I transform it to an exploitable array and I exclude the first item.

$scope.country = [];
for (var o in countryList) {
    if(o != 0){
        $scope.country.push(countryList[o]);
    }
}

I exclude the first item because in my system 0 it's for people who don't selected a country yet. So people don't complete their profile.

In my template :

<option ng-repeat="(key, value) in country" value="{{ key+1 }}">{{ value }}</option>

If I just write value="{{ key }}" Afghanistan (first in my countries list) has the value 0, but in my DB Afghanistan = 1. When I write key+1 all countries had the right ID, but angular create an empty option like this :

<option value="? undefined:undefined ?"></option>
<option value="1">Afghanistan </option>
...

I've the same problem for cities. When I get my cities I build an array :

$scope.cities  = [];
$scope.cities[4398] = 'Anywhere';
for (var c in response.data) {
        $scope.cities[response.data[c]['id']] = response.data[c]['name'];
}

It's return this array :

[15: "Balkh", 16: "Bamyan", ..., 48: "Zabul", 4398: "Anywhere"]

The first problem here angular sort my array by index, but I don't want. Anywhere must be at the first place.

The second problem is in my template :

<option ng-repeat="(key, value) in cities track by key" value="{{ key }}">{{ value }}</option>

If i don't add track by key the app crash for a duplicating problem. But angular do the samething for the countries and create empty option like this :

<option value="0" class="ng-binding"></option>
<option value="1" class="ng-binding"></option>
...
<option value="15" class="ng-binding">Balkh</option>
<option value="16" class="ng-binding">Bamyan</option>
...
<option value="48" class="ng-binding">Zabul</option>
<option value="49" class="ng-binding"></option>
...
<option value="4398" class="ng-binding">Anywhere</option>

How can I fix this problem of "empty option" ?

---

Edit using ng-options

Using ng-options I've similar problem:

for (var o in countryList) {
    if(o != 0){
        $scope.country[o] = countryList[o];
    }
}

// result:
[1: "Afghanistan", 2: ...

template:

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

I've this result:

<option value="?" selected="selected" label=""></option>
<option value="0" label=""></option>
<option value="1" label="Afghanistan">Afghanistan</option>
...

Answer 1

Your $scope.country and $scope.cities are arrays, that's why, when you don't provide values for certain positions, JavaScript fills the blanks with undefined values.

Consider this example:

var list = [];
list[2] = "foo";
console.log(list);
// prints: [undefined, undefined, "foo"]

To remedy this, you can either:

• use an object ( {} ) -- then Angular will skip the numbers not provided explicitly, but it might sort the items not the way you would like

• create a list whose values are objects with key and value properties, like this: [{key: 2, value: "foo"}, {key: 5, value: "bar"}] and ngRepeat over that list instead:

   <option ng-repeat="city in cities" value="{{ city.key }}">{{ city.value }}</option> 

Answer 2

since the other guy already answered most of your question... you don't need the option "Anywhere" to be in the array as it seems that you want it to be the null option you could just hard code it into the select like this

<select your select atributes>
    <option value="" >Anywhere</option>
    <option ng-repeat and all that>{{jdsahgkjadsf}}</option
</select

like this, it will be an empty option and the browser will select it by default