Modifying ng-options

Question

I have json object as:-

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

I am using country codes sprite image to display country flags. I am using ng-repeat to display the particular flag.

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

It is working fine . Now i want to use the same css classes to include the flag in the ng-options (drop-down).

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

How can i achieve this.

Possible duplicate http://stackoverflow.com/questions/15264051/how-to-use-ng-class-in-select-with-ng-options — Sachin Kariyattin, Feb 22 '16 at 09:15
may be help you http://stackoverflow.com/questions/23323179/how-to-use-angular-js-ngoptions-with-custom-attributes — Hadi J, Feb 22 '16 at 09:16
@hadiJZ Here i am using css class to display the flag image. — SavantMohan, Feb 22 '16 at 09:18

score 0 · Answer 1 · answered Feb 22 '16 at 09:22

Use ng-repeat on option tag:

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

score 0 · Answer 2 · answered Feb 22 '16 at 09:23

add options-class

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

Modifying ng-options

2 Answers2