I use an editor to add comment and this content save as html in db. When I want to display it in page all html elements appear in out put. So I want to use this code to solve my problem but not solve it.
Here is my code
Data include {body, name, date} that body save as html
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html-unsafe="d.body">
<p>{{d.body}}</p>
</div>
</div>
</div>
In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.
But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()
Filter
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
HTML
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html="d.body | sanitize">
<p>{{d.body}}</p>
</div>
</div>
</div>
For more info refer this SO answer
Related
I'm trying to integrate this card styling (https://codepen.io/simeydotme/pen/PrQKgo) into my rails app. But it seems quite difficult to do so because my code generates the image URL on the HTML, but this CodePen has its image URLS declared in the CSS inside a variable like --charizardfront:.
My qestion is, how can you modify this CodePen so that it works by taking the URLs from the HTML instead?
The CodePen and my project uses SCSS, so perhaps that give us more options?
This is my _profile-quest_cards.html.erb code for the card/s that I want to style if anyone is interested:
<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>
I've tried the method suggested by ChatGTP, but that doesn't work on codepen:
"You can add a data-* attribute to the div element that contains the image, and assign the value of quest_card.url to it. Then in the SCSS code, you can select that div, and use the attr() function to get the value of the data-* attribute, and assign it to the --charizardfront variable.
Here's an example of how you could do this:
HTML:
<div class="card charizard animated" data-charizard-front="https://cdn.midjourney.com/42ada987-b1aa-4797-a4be-b8cc4a6a6b13/grid_0.png"></div>
SCSS:
--charizardfront: url(attr(data-charizard-front));
When I try that on Codepen, the card image doen't show. Hope I can accomplish my task without using javascript, but if that's the best soloution then I'll take it. Thank you!
HTML divs don't use urls as attributes. You're probably looking for
<img>
Try something like
<img src='path'></img>
You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:
var titleSelector = $(`
<div>
<div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
<div class="jqx-scheduler-edit-dialog-field">
<div><v-select :options="options"></v-select></div>
</div>
</div>`);
fields.subjectContainer.append(titleSelector);
I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:
<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-
label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
...
</div>
</div>
My question is: How can I render this HTML and add it to the dialog?
I am using webpack and vue-router.
PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.
You have several options:
Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
I want to display data from database (using PHPMYADMIN). The data which I want to display stored using ng2-ckeditor (Angular 6). So when it gives result it also shows the html tags, which I don't want. How do I get my result without displaying HTML tags?
This is for displaying in html page
(and newsArray is type Object)
which is displaying data but with html tags
<div *ngFor="let item of newsArray">
<div class="panel-body">
{{item.details}}
</div>
</div>
result given by this is:
<p>hello</p>
but expected result:
hello
you can use [innerHtml] property on the div
<div *ngFor="let item of newsArray">
<div class="panel-body" [innerHtml]='item.details'>
</div>
</div>
You can replace your result like this:
getText() {
return this.data.replace(/<[^>]*>/g, '');
}
This will replace all your html tags and keep only the blank text.
See my stackblitz demo
Can I use ng-show and ng-hide to display/hide a html template.
If that template is different html file.
I am trying to split my html file into two parts and show/hide it on a event.
It would be better is you use ng-if instead ng-show as it would save one html template request.
<div ng-if="some_condition">
<div ng-include="'template1_path.htm'"></div>
</div>
<div ng-if="!some_condition">
<div ng-include="'template2_path.html'"></div>
</div>
Yes you can use ngShow/ngHide in conjunction with ngInclude:
<div ng-show="some_condition">
<div ng-include="template1_path">
</div>
</div>
<div ng-show="!some_condition">
<div ng-include="template2_path">
</div>
</div>
I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well
<div ng-controller="MyCtrl" >
{{level}}
</div>
that is it should be bold without using
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>
But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.
Is there anyway to achieve it.or am i totally wrong here?
You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Example :
app.js
angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
$scope.data = '<b>my text</b>'
});
index.html
<div ng-controller="Controller">
<p ng-bind-html="data"></p>
</div>
You can use ng-bind-html-unsafe:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<div ng-bind-html-unsafe="level"></div>
</div>
Unsafe because the DOM should generally not be modified inside a controller.
Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?
http://jsfiddle.net/u37xtpjd/2/
You can accomplish this using the ng-bind-html directive:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<span ng-bind-html="level"></span>
</div>