Angularjs Html with CSS with in the TAG

Question

I am trying to insert HTML inside template using ng-bind-html attribute and $sce dependency in the controller . But for some reason its not working as expected it's not able to display Country Flags. I am able to inspect and see the flag code values are coming but flags are not able to display in the drop down when I implementing in My Project Thanks in advance. My code:

In HTML

<ui-select ng-model="payment.baseCurrency"  name="baseCurrency" class="currency" required data-ng-change="determinePaymentMethods()" theme="select2" >
                    <ui-select-match placeholder="{{'Select' | translate}}"><flag country="{{$select.selected.flagCode}}" size="16"></flag> {{$select.selected.code}} {{$select.selected.name}}
                    </ui-select-match>
                    <ui-select-choices repeat="baseCurrency in baseCurrencies track by baseCurrency.flagCode | searchFilter:{name:$select.search}" >
                      <flag country="baseCurrency.flagCode" size="16"   ng-bind-html=" toTrusted($index) +' '+ baseCurrency.code +' '+ baseCurrency.name |highlight: $select.search"></flag>
                    </ui-select-choices>
                  </ui-select>

In Controller

$scope.toTrusted = function(length) {
    var country = $scope.baseCurrencies[length].flagCode;
    return $sce.trustAsHtml('<span class="flag '+country+'"></span>');
};

ArBro · Accepted Answer · 2015-08-10 09:20:09Z

1

In your ui-select-choices line you need to use ng-repeat instead of just repeat.

<ui-select-choices ng-repeat="baseCurrency in baseCurrencies track by baseCurrency.flagCode | searchFilter:{name:$select.search}" >

That will probably fix your code.

answered Aug 10, 2015 at 9:20

ArBro

7316 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

karthik pamidimarri Over a year ago

NO boss it won't work,when are you going to user <ui-select> we have to use repeat

Collectives™ on Stack Overflow

Angularjs Html with CSS with in the TAG

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related