选中选项ng-repeat

Question

我需要检查ng-repeat中的值数组的长度，取决于，我必须添加或<option>或<optgroup> 。

ng-repeat看起来像这样：

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

'countries'是一个对象数组，如下所示：

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

代码看起来应该是这样的，但是有角度的方式：

<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>

任何线索如何使用角模板？

提前致谢

Answer 1

这个问题很棘手，因为只允许在<select>使用<option>或<optgroup> <select> 。

实现这一目标的一种方法是将两个单独的ng-repeat与ng-if结合使用，但这会弄乱数值的顺序。

最合适的方法是将ng-repeat-start / ng-repeat-end与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>

演示