Ionic V1 - Print special characters in ion-radio

Question

In my controller, I am generating template dynamically with the REST API response and then showing the values as ion-radio.

My Code

var generatedTemplate = '<ion-list>';

angular.forEach($scope.longPressOptions, function(value, index) {
  generatedTemplate += '<ion-radio class="item-text-wrap" ng-model="longPressOptions.selectedValue" ng-value="' + value.wc_id + '">' + value.wc_name + '</ion-radio>';
}

generatedTemplate +=  '</ion-list>';

The value.wc_name may contain "<Default>", "N/A", ... values. These kind of values are not listed and shows error.

How to print the values as it is, without converting it to HTML format?

EDIT 1: (Image added)

<Default> should be displayed in the highlighted area.

EDIT 2: (Generated code)

<h5 style="border-bottom: 1px solid lightgray">Bystar 3015-2</h5> 
<ion-list>
  <ion-radio class="item-text-wrap" ng-model="longPressOptions.scheduleSelectedWC" ng-value="2"> //NewName 
  </ion-radio>
  <ion-radio class="item-text-wrap" ng-model="longPressOptions.scheduleSelectedWC" ng-value="10">N/A 
  </ion-radio>
  <ion-radio class="item-text-wrap" ng-model="longPressOptions.scheduleSelectedWC" ng-value="11"><Default> 
  </ion-radio>
</ion-list>

@PareshGami the value is being considered as HTML. I think so. But all I wanted is to print the value as it is. The value can be any character. Thanks in advance. — Naveen Kumar V, Oct 25 '17 at 07:58

Paresh Gami · Answer 1 · 2017-10-25T08:09:13.527

0

You can print as string in html like

 <ion-radio class="item-text-wrap" ng-model="longPressOptions.scheduleSelectedWC" ng-value="11"> <![CDATA[ <default> ]]>
  </ion-radio>

edited Oct 25 '17 at 08:09

answered Oct 25 '17 at 08:02

Paresh Gami

4,777
5
23
41

After making the code as ### "generatedTemplate += '' + '<![CDATA[' + value.wc_name + ']]>' + ' ';" ### the text for other radio button becomes empty. – Naveen Kumar V Oct 25 '17 at 08:08
You have to use ng-repeat for display dynamic radio generation – Paresh Gami Oct 25 '17 at 08:16
I checked. But the same behavior as mentioned in previous comment. :( – Naveen Kumar V Oct 25 '17 at 08:16
1

Use ng-repeat for $scope.longPressOptions – Paresh Gami Oct 25 '17 at 08:19
It seems ng-repeat does not work in ionic popup. I will check and update soon. Thanks for your timely reply. Link: https://forum.ionicframework.com/t/list-in-a-pop-up-using-ng-repeat-for-list-items/7616 – Naveen Kumar V Oct 25 '17 at 08:30

Ionic V1 - Print special characters in ion-radio

1 Answers1