How to render basic HTML code with html elements in a view
I have an html form like this:
<div class=\"container\">\r\n\t<div class=\"clearfix row
\">\r\n\t\t<div class=\"col-md-12 column\">\r\n\t\t\t<h3>\r\n\t\t\t\tNew form created\r\n\t\t\t<\/h3
>\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t <label><strong>Enter name<\/strong><\/label><input
name=\"1430985388220267#enter_name\" id=\"1430985388220267\" class=\"form-control\" grid-name=\"Enter
name\" type=\"text\" \/>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>
This is the form that I want to display in the mobile app. Mobile app I developed in ionic framework and cordova using angular JS. When I try to show the form as html then it gets rendered with basic elements like title, bold, labels like content, but the input tag it doesn't show, or I can tell the input elements of the main html elements. such as checkbox, radio button, etc. are not displayed. I am doing this in a view:
<ion-view title="Fill the Form">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
<div ng-bind-html="getHtml(htmlValue)">
</div>
{{htmlValue}}
<div class="clearfix"></div>
</ion-content>
</ion-view>
my getHtml function is like this:
$scope.getHtml = function(html){
var trusted = $sce.trustAsHtml(html);
return trusted;
};
i have also changed:
angular.module('iot', ['ionic','chart.js','ngSanitize'])
I am pushing the code from the REST response into an array called HTML
but still I don't get the expected result, what else is left in this case? Any help would be really appreciated.
source to share
Use filter:
// Filter to enable HTML tags
app.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
Then include this in your HTML tag along with a filter (in this case "unsafe"), for example:
<!-- i.detail will be your valuable -->
<div ng-bind-html="i.detail | unsafe"></div>
source to share