So, I am working on a html email template and I see this code.
What does it mean when it says:
<div style='{{container}}'></div>
what do the two curly brackets within the style tag indicate?
its angular.js code
angular.js uses {{ }} to bind variables to HTML,
in your condition, the CSS style class name is stored in the variable "container" and then used in the code
This way the application programmer can change the style class of the div from JAVASCRIPT easily based on different conditions
if you don't need dynamic styles, just remove the {{container}} part and replace it with the CSS style class name you have
static version will be somthing like this:
<div style='myCLassName'> .... </div>
Maybe you work on laravel views. So in blade {{ }} means < ?php ?>
In this case it was set "container" in controller and was passed to view as variable.
Related
I am using Mustache Template in my HTML DOM to generate some Dynamic contents.
I am using {{ }} inside HTML tags for that..
Now i want generate non HTML dynamic extension, for that i have {{{ }}}
But i dont know the difference between both.
so, what is the difference between these 2?
See the manual
The most basic tag type is the variable. A {{name}} tag in a basic
template will try to find the name key in the current context. If
there is no name key, the parent contexts will be checked recursively.
If the top context is reached and the name key is still not found,
nothing will be rendered.
All variables are HTML escaped by default. If you want to return
unescaped HTML, use the triple mustache: {{{name}}}.
I want to have an html element with two classes defined by twig variables.
I can do it with one twig variable and they both work separately. But once I try to have them together, only the first class is effective.
I searched on the forum but found only about twig classes or two classes direct in html.
With Twig I have:
<p class={{"type#{item.type1}"}}> Paragraph </p>
In html it should be:
<p class="type1 type2"}}
When I try to combine both as below, it does not work:
<p class={{"type#{item.type1} type#{item.type2}"}} > Paragraph </p>
I also have tried the other concat method with ~ but without sucess.
How to concatenate strings in twig
And instead of the space I have tried to add as explained here also unsucessful:
How to add space between variables in twig template?
Your forgot the wrap your attribute value in quotes. HTML will treat the 2nd class as another attribute, not being part of the class attribute
<p class="{{"type#{item.type1} type#{item.type2}"}}">Paragraph</p>
What is the difference between ng-include and ng-bind-html in angular??
imagine a case when based on some parameters the html will change rather to be for example an image tag or span tag; so There should be a mechanism to add that dynamic html
for example
<!--dynamichtml : <span class='glyphicon glyphicon-plus'></span>-->
<a ng-include="'dynamichtml.html'"></a>
<a ng-bind-html="dynamichtml"></a>
ng-bind-html is described as follows:
Evaluates the expression and inserts the resulting HTML into the element[...]
ng-include, on the other hand
Fetches, compiles and includes an external HTML fragment.
The value in ng-bind-html should evaluate to valid HTML. The value in ng-include should evaluate to a valid URL.
ng-bind-html
ng-bind-html is used when one has a model that contains HTML in the string format. On binding the model with that of the DOM, this gets updated in the element, as its child.
ng-include
This adds an external html file in the DOM. Here, it doesn't gets bind, but only gets attached.
It depends upon the application and the model states, based on which one can decide with which directive to make use of.
Here, you can read more about ng-bind-html and ng-include.
Why would I use one over the other, except if I need to define the style from a function?
<div once-style="{width:50%;}"/>
once-style
<div style="width:50%;"/>
HTML Style Attribute
If i have a fixed style in an AngularJS application is there a reason to use one over the other?
I tried finding relevant information, i just found this which really didn't answer my question.
One time binding is native to Angular. Inside the curly braces prefix the expression with a double colon. For example:
{{::name}}
The Django UserCreationForm is very useful and easy to use functionally, however, it just throws everything onto the page so all the TextFields are in one line.
Is there anyway to layout and style the form? Specifically to put labels and input fields on a new line and possibly make it possible to apply some CSS to the whole form and individual parts of the form.
Use BoundField and custom filters, and correct names of attributes of UserCreationForm class
Uses the BoundField class to display HTML or access attributes for a single field of a Form instance. And add CSS with a filter in the templatetags folders with an __init__.py, if have error remember add templatetags in your INSTALLED_APP like to 'app.name.templatetags' like:
{{ form.username.label_tag }}
{{ form.username|addclass:'form-control' }}
{{ form.password1.label_tag }}
{{ form.password1|addclass:'form-control' }}
{{ form.password2.label_tag }}
{{ form.password2|addclass:'form-control' }}
View source
https://github.com/django/django/blob/master/django/contrib/auth/forms.py
The passwords are named 'password1' and 'password2'
Every django form has three methods:
as_p()
as_ul()
as_table()
See the outputting forms as html section in the docs. You can style this output as you want.
If you want even more control over form's html then read this section of the same documentation.
In your forms.py,you can inherit UserCreationForm and set css style.(How to set css for forms CSS styling in Django forms)