AngularJS: How to display html data in view? - javascript

I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?

You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>

If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.

Related

PrimeNG Chips component using p-inputgroup challenge

First my code used simply String to define email but there were requirement to use multiple values instead of one String[]. I'm using PrimeNG 14.2.x combined with Angular 14 as frontend. Always with inputgroup using text have no problem but somehow it doesn't work well with p-chips component.
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<input type="text" pInputText placeholder="Email" name="recipientEmails">
</div>
</div>
result:
browser view - ok
after modification I've got
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<p-chips allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result:
browser view - failed
and from this point p-chips isn't useful anymore. User cannot see what is added.
I've stucked, Any ideas ?
I tried modify css directly to
.p-chips {
width: 100%;
}
but it didn't help
Ok, I've resolved this by using bootstrap right now
<div class="p-col-12 p-md-4">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><em class="pi pi-envelope"></em></div>
</div>
<p-chips placeholder="Emails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result
I hope it helps someone

How do I get Child HTML elements attribute values using AngularJS

I have the html below:
<div class="div1">
<span class="span1" content="Apple">
</span>
<span class="span2" content="Orange">
</span>
</div>
<div class="div2">
<span class="span1" content="Mazda">
</span>
<span class="span2" content="Nissan">
</span>
</div>
I need to pull out the value of attribute "content" which is "Mazda" from div2 -> span1.
Using JQuery, I'd do it this way:
$(".div2 .span1").attr("content");
How do I achieve the same using AngularJS?
Getting the value of the element using jQuery or vanilla javascript, for instance document.getElementById, kind of defeats the whole purpose of AngularJs and similar frameworks.
Using the databinding and looping capabilites of AngularJS 1.x your html could look something like this:
<div class="div1">
<span class="span1" ng-repeat="fruit in fruits">
{{fruit}}
</span>
</div>
<div class="div2">
<span class="span1" ng-repeat="car in cars">
{{car}}
</span>
</div>
There's a great thread here if you want to dive in: "Thinking in AngularJS" if I have a jQuery background?

How to create directive with angularjs binding expression?

I need to convert below code to dynamic code using angular directive or any other angular way.
one Directive:
<view-partial></view-partial>
view-partial.html
<div id="layoutFormation">
<div ng-repeat="container in layoutJSON.layoutInfo.containers" class="row form-container x_panel tile">
<div class="x_title nopadding"><label class="container-header">{{(container.headerText == " ") ? "" : container.headerText }} </label></div>
<div number-of-rows="{{ container.table.numOfRows }}" number-of-columns="{{ container.table.numOfColumns }}" class="x_content col-md-12 col-xs-12 collapse-expand">
<div ng-repeat="columnNumber in range(container.table.numOfColumns)" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 column">
<binding-control-block ng-repeat="rowNumber in range(container.table.numOfRows)" row-number="{{rowNumber}}" column-number="{{columnNumber}}" style='margin-bottom: 12px;' />
</div>
</div>
</div>
</div>
Here binding-control-block is another directive that directive with binding code already i'm doing in dynamically. Only thing the above partial page also i need to convert dynamically. I think I have to add all the above view-partial code in another directive. just i need any example or idea how to create directive with binding expression. Please any one help me to achieve this. If any clarification need please message me. Thanks in advance.

Filter data returned from helper with regex, using text input as you type

Basically, in my template I have the following code:
<div class="normal-padding">
Quicksearch: <input type="text" id="searchBox"/>
</div>
<div class="ui divider"></div>
{{#each getChildren}}
<div class="normal-padding">
<div class="ui two column grid">
<div class="column" style="width:60px;">
<div class="squaredOne">
<input type="checkbox" value="{{_id.toHexString}}" class="selectedChild" id="{{_id.toHexString}}" >
<label for="{{_id.toHexString}}"></label>
</div>
</div>
<div class="column">
<label for="{{_id.toHexString}}">{{firstname}} {{lastname}}</label>
</div>
</div>
</div>
{{/each}}
Where getChildren is the data coming from mongo.
My question is this:
How can I use what's being typed in input#searchBox to add/remove members from the getChildren helper?
Example:
Typing "ar", will list only the records that start with "ar".
I can figure out the regex required, I'm just not sure how to do this in meteor the correct way. I especially want to stay away from manually manipulating the DOM.
I've tried some filtering packages, but they all query the database again, where I just want the data that's already in the client/browser to be changed.
In other words, not send a query down the wire again.
Thanks!

How to clear the default template for dropzonejs

As it stands, dropzonejs is generating markup for every file uploaded. I do not want this nor do I want to define a custom template. As it stands, I just listen for various events and perform actions like updating HTML.
When I don't define a template, the typical default markup is generated.
<div class="dz-preview dz-file-preview dz-processing dz-success">
<div class="dz-details">
<div class="dz-filename">
<span data-dz-name>thumbnail2.png</span>
</div>
<div class="dz-size" data-dz-size>
<strong>0.1</strong> MiB
</div>
<img data-dz-thumbnail>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress style=
"width: 100%;"></span>
</div>
<div class="dz-success-mark">
<span>✔</span>
</div>
<div class="dz-error-mark">
<span>✘</span>
</div>
<div class="dz-error-message">
<span data-dz-errormessage></span>
</div>
</div>
I don't want any markup to be generated. I've looked at the addedfile event and that's where it determines if a custom template is defined or generate the default markup. I don't need this.
I could easily just target .dz-preview and display none however I just would prefer if the HTML was never generated.
I've tried setting previewsTemplate: "" and that didn't work.

Categories