修改ng-options

Question

我的json对象是：-

{    "callingCodes": [
        {
            "name": "United States",
            "code": "+1",
            "isoCode": "US",
            "isFree":"true",
            "flag":"flag us" 
        },
        {
            "name": "Turkey",
            "code": "+90",
            "isoCode": "TR",
            "isFree":"true",
        "flag":"flag tr" 
        }]

我正在使用国家代码精灵图像来显示国家旗帜。我使用ng-repeat来显示特定的标志。

<td><span style="display: inline-block; margin-left: auto;" ng-class="{{'countryData.flag'}}"></span></td>

它工作得很好。现在，我想使用相同的css类在ng-options (下拉列表)中包含该标志。

<select id="countryCode" class="form-control" ng-required="true" ng-model='sendMsgData.toCountryCode' 
       ng-options="supportedCode.code as (supportedCode.code + '(' + supportedCode.isoCode + ')') for supportedCode in supportedCountryCallingCodes">
                 <option value="">Country Code</option>
              </select>

我如何才能做到这一点。

Answer 1

在option标签上使用ng-repeat：

<select id="countryCode" class="form-control" ng-required="true" ng-model="sendMsgData.toCountryCode">
    <option ng-repeat="supportedCode in supportedCountryCallingCodes" value="supportedCode.code" ng-class="countryData.flag">{{supportedCode.code}}</option>
</select>

Answer 2

添加选项-类

  <select id="countryCode" class="form-control" ng-required="true" ng-model='sendMsgData.toCountryCode'   options-class="countryData.flag"
   ng-options="supportedCode.code as (supportedCode.code + '(' + supportedCode.isoCode + ')') for supportedCode in supportedCountryCallingCodes">
             <option value="">Country Code</option>
          </select>