修改 ng 选项

Modifying ng-options

本文关键字：选项 ng 修改      更新时间：2023-09-26

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

我怎样才能做到这一点。

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

添加选项类

  <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>
相关文章：