选中选项ng-repeat

Question

I need to check the length of an array of values inside ng-repeat, depends of that, I have to add or an <option> or <optgroup> .

The ng-repeat look like this:

<select name="countries">
    <option ng-repeat="country in countries">{{ country.country_name }}</option>
</select>

And the 'countries' is an array of objects that looks like this:

[
    {
       country_name: "Argentina"
       language: Array[2]
       locale_code: "AR"
    },
    {
       country_name: "Austria"
       language: Array[1]
       locale_code: "AR"
    },
    ....
    ....
]

The code should look like this, but in angular way:

<select name="countries">
    for (var i; i < countries.length; i++) {
      if (countries[i].languages.length > 1) {
      <optgroup value="{{ i }}" label="{{ country.country_name }}">
         for (var j; j < countries[i].languages.length; i++) { 
         <option value="{{ countries[i].languages[j].value }}">{{ countries[i].languages[j].name }}</option>
         }
      </optgroup>
      } else {
      <option value="{{ countries[i].languages[0].value }}">{{ countries[i].languages[0].name }}</option>
      }
    }
</select>

Any clue how to do it with angular template?

Thanks in advance

Answer 1

This question is tricky since you are only allowed <option> or <optgroup> inside <select> .

One way to achieve this is to have two separate ng-repeat s in combination with ng-if , but this will mess up the order of values.

The most appropriate way is to use ng-repeat-start / ng-repeat-end in combination with ng-if :

<select ng-model="selectedLanguage">
  <optgroup ng-repeat-start="country in countries" 
            ng-if="country.language.length > 1" 
            label="{{country.country_name}}">
    <option ng-repeat="lang in country.language" 
            value="{{lang}}">{{lang}}</option>
  </optgroup>
  <option ng-repeat-end 
          ng-if="country.language.length === 1" 
          value="{{country.language[0]}}">
    {{country.language[0]}}
  </option>
</select>

Demo