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

在ng-repeat代码上使用option：

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

修改ng-options

2 个答案: