I'm trying to display a file name but when the name contains special characters it's completely ignored.
This is the code:
<p class="meta-description" [innerHTML]="{{ vm.previewing.filename + ' | ' + vm.previewing.emailSubject }}">
{ vm.previewing.filename }}
<span ng-if="vm.previewing.emailSubject"> | {{ vm.previewing.emailSubject }}</span>
Even adding [innerHTML] is not fixing the issue.
This is what shows up on the page if the file is named 'çx' for example:
<p class="meta-description ng-binding" [innerhtml]="x.pdf | ">
x.pdf
<!-- ngIf: vm.previewing.emailSubject -->
</p>
In case we are talking in AngularJS ,
Do you have the module angular-sanitize enabled ? If so use the ng-bind-html directive to parse special characters or markup to display. Also avoid mixing interpolation and property binding, choose only one to use.
<p class="meta-description" ng-bind-html="vm.previewing.filename + ' | ' + vm.previewing.emailSubject">
<span ng-if="vm.previewing.emailSubject" ng-bind-html="'|'+ vm.previewing.emailSubject"> </span>
A tip to make the code cleaner would be creating those string values on the controller side (like the concatenation of filename and email subject to the p element).
Please bear in mind that the bracket syntax "[]" is for Angular 2-11 property binding and not AngularJS.
Reference:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Related
I have the following code where I need to make the profile.userId bold:
<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
{{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>
When displayed on the page, it should say "User (username), last logged in on MM/dd/yyy h:mma" with the username in bold, but I'm not sure how to style the profile.userId within a binding?
You could split the text field. You do not need to keep the binding all together. However, I'm not quite sure what's happening with your pipes so this may not work. My guess is that you should simplify your pipes so that you can break up the text portion as below:
<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
<b>{{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId }} </b>
, {{ (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>
I have a simple question (I hope this). I have a service that return a string as result. The format is something like this:
"
Test1: the association has been accepted.\nTest2: the association has been accepted.\n"
"
On the client side (I'm using Angular 1.5.x) I put that string into a object (say the variable $scope.alert.message). After that I want to print that string in a modal. My html is:
<script type="text/ng-template" id="infoTemplate.html">
<div class="modal-header left" ng-class="['div-' + alert.type, closeable ? 'alert-dismissible' : null]">
<h3 class="modal-title" id="modal-title">Info</h3>
</div>
<div class="modal-body" id="modal-body">
<img class="imm-info" ng-class="['imm-' + alert.type, closeable ? 'alert-dismissible' : null]" />
<p class="col-sm-10 col-sm-offset-2">{{alert.message}}</p><button class="col-sm-3 col-sm-offset-5 btn " ng-class="['button-' + alert.type, closeable ? 'alert-dismissible' : null]" ng-click="cancel()">OK</button>
</div>
</script>
You can see the '{{alert.message}}'. My problem is that my message "doesn't display" the character '\n'. So it doesn't create more than one line. An example here:
example
I use the white-space: pre-wrap CSS style, e.g. :
<p style="white-space: pre-wrap">{{alert.message}}</p>
Try this in HTML:
<pre>{{ alert.message }}</pre>
Already answered here:
The < pre > wrapper will print text with \n as text
\n is not interpreted in html. You need to replace these instances with <br/> elements. You could for example replace them with a regex if you do not want to change the original string.
You can write a function where you take the alert-message and split it by "\n"
than iterate trough it via *ngFor.
For example:
<p *ngFor="let msg of getMessageSplitted(alert.message)">{{msg}}</p>
I've created a custom tag to hide zero values from HTML. I use this for hiding currency formatted numbers when its values are zero.
This is my custom tag:
def hideifz(value):
return '' if value == 0 else value
The problem is that this tag deletes some of my HTML.
This is the relevant part of my template:
<div class="price">
<span class="price-new">{{ publication.price_record.low_price|CLP }}</span>
<span class="price-old">{{ publication.price_record.high_price|hideifz|CLP }}</span>
</div>
This HTML is for showing product prices. publication.price_record.low_price and publication.price_record.high_priceare the prices of my product. If the product is in sale, it must have high_price != 0, and this value must be shown in the HTML.
CLP is just another tag for currency formatting:
def toCLP(value):
if not value:
return value
return '$'+intcomma(int(value)).replace(',', '.')
If high_price is not zero, the output HTML is okay. For example:
<div class="price">
<span class="price-new">$75.990</span>
<span class="price-old">$83.990</span>
</div>
In the other hand, if high_price is zero, some of my HTML is deleted:
<div class="price">$21.990</div>
Note that span.price-new and span.price-old were removed.
Now, if I remove the hideifz tag, the output of the previous example looks like this:
<div class="price">
<span class="price-new">$21.990</span>
<span class="price-old">0.0</span>
</div>
The spans are back when I remove the hideifz tag.
I just want to hide the python variable/value from the html, preserving the outer span for other uses.
I know I can solve this by simply using the {% if val %} tag, but I wanted to create my own tag for simplicty.
I'm working with django 1.10.
Thanks you.
I save a key message along with a string in my bbdd this way:
#{message.format.error} + 'foo string'
In my view, I retrieve the list of errors like this:
<p th:each="error : ${errors}">
<span th:utext="${error.message}"></span>
</p>
But I get the bbdd content in the html span:
<span>#{message.format.error} + 'foo string'</span>
How I can evaluate this?
If I put my bbdd content in a span directly, it will work:
<span th:utext="#{message.format.error} + 'foo string'"></span>
The resulting HTML is:
<span>Error foo: foo string</span>
You need to pre-process your expression before hand. See the code below
<p th:each="error : ${errors}">
<span th:utext="__${error.message}__"></span>
</p>
I'm looking for a command line tool (or Perl module or VIM script or whatever) that will take some input files (such as XML or JavaScript files) and format them in HTML. I specifically want my output not to contain stuff like <span style="color: red"> or <font color=red> according to a particular colour scheme, rather it should use CSS class names to mark up the different syntactic parts of the file.
For example, if I had this file as input:
function f(x) {
return x + 1;
}
the kind of output I would like is:
<pre><span class=keyword>function</span> <span class=ident>f</span><span class=punc>{</span>
<span class=keyword>return</span> <span class=ident>x</span> <span class=op>+</span> <span class=numliteral>1</span><span class=punc>;</span>
<span class=punc>}</span></pre>
Does anyone know of such a tool?
Something like VIM's 2html.vim script, but outputting class="" attributes with the syntax highlight group names (like "Constant", "Identifier", "Statement", etc.) would be ideal.
Thanks,
Cameron
You can feed a file into GeSHi using PHP on the command line (or cURL your own local server or some other hack)
http://qbnz.com/highlighter/geshi-doc.html#basic-usage
There is buf2html.vim. Unfortunately, it uses non-semantic class names: See http://intrepid.perlmonk.org/apropos.vim/buf2html/current/myself.html
I think this is exacly what Vim's :TOhtml does if you
:let html_use_css = 1
Original:
function f(x) {
return x + 1;
}
output:
<pre>
<span class="Identifier">function</span> f(<span class="">x</span><span class="javaScriptParens">)</span><span class=""> </span><span class="Identifier">{</span>
<span class="Statement">return</span><span class=""> x + </span>1<span class="">;</span>
<span class="Identifier">}</span>
</pre>