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>');
};
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.