Hello!
I've attempted to implement typeahead feature in GAE app with TwitterBootstrap framework. It's necessary to render into Jinja2 template this snippet:
<input type="text" class="span3"
style="margin: 0 auto;" data-provide="typeahead"
data-items="4" data-source='["Alabama","Alaska","Arizona"]'>
And it's seems to be impossible because template engine always escaped single quotes replasing it by double. Obviously what entire typeahead construction could not work at all in this case. There are several documented escaping method such as raw, safe or even autoescape false but they can't resolve this issue. How to force Jinja2 to render the single quotes?
Have anybody a matching recipe how it would been resolved?
Thanks!
The following code works for me:
{{ typeahead_data|safe }}
Please consider including your actual code next time, instead of just saying 'it doesn\'t work'.
Related
Hi i'm creating a Harvard Reference Generator using AngularJS ive got it working perfectly, i can get it to create the full reference however i need one section to be styled in italics, the information is captured using a form. I require a little help with the output.
Current Output Code:
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"+book_title+".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
What i need is for one section "book_title" to be shown in italics
I have tried:
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
<i>"+book_title+".</i>
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"+<i>book_title</i>+".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
{{
book_author+" "+book_multiple_authors+" ("+book_year+").
"<i>+book_title+</i>".
"+book_place+":
"+book_publisher+".
"+ book_edition
}}.
Nothing seems to work, i cant find any further reference to formatting the angularjs output specific to one section. What am i missing, any help would be greatly appreciated. That You.
To have HTML rendered within ng expressions, you need to use ngSanitize or $sce dependency. Else, HTML will be rendered as string inside your expressions.
In your case, you can simplify it by breaking it down to multiple elements:
<span ng-bind="book_author"></span>
<span ng-bind="book_multiple_authors"></span>
<span ng-bind="book_year"></span>
<i>
<span ng-bind="book_title"></span>
</i>
<span ng-bind="book_place"></span>
<span ng-bind="book_publisher"></span>
<span ng-bind="book_edition"></span>
Code between double curly braces in AngularJS is meant to be JavaScript, so it can't contain HTML tags. The way around it would be along these lines:
{{book_author+" "+book_multiple_authors
+" ("+book_year+"). ";}}
<i>{{book_title}}</i>
{{" "+book_place+": "+book_publisher
+". "+book_edition;}}
Let me know if this works for you, if not we can try CSS instead to render text in italics.
Best wishes,
Lukasz
If I in vue have an expression like
{{foo.earlier_versions.length}}
... the page is emitting an error if foo or foo.earlier_versions is undefined, but angularjs (if I had used that) would be more relaxed and just give us an empty result.
The error I get is like
and the page execution is terminated.
Is there a way to have vue equally forgiving?
It would really help to not have to write long expressions just to make them "correct".
if you have all the recent dependencies/ devDependencies you can use this
<span class="ml-5 font-bold">
{{ foo?.earlier_versions?.length ?? 'fallback value' }}
</span>
I am using Play 2.3 with Scala 2.11.6 and Angular. I have a page template that contains an Angular application.
However, if I use $index in a Scala template like this:
<div ng-repeat="message in messages track by $index">{{message}}</div>
, I will get this warning during the compilation.
possible missing interpolator: detected interpolated identifier `$index`
I tried to escape dollar sign with $$index, but it didn't work.
You can use the Unicode encoding for dolar: #{"\u0024"}index.
<div ng-repeat="message in messages track by #{"\u0024"}index">{{message}}</div>
Comments
The problem exists in scala-2.11. It works in scala-2.10.
There is also the option to disable the entire warning by compiling with -Xlint:-missing-interpolator.
I am an AngularJS newbie and trying to figure out what class=ng-binding does in this example:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
I found it here:
http://todomvc.com/architecture-examples/angularjs/#/
I use Chrome and developer tools. Is this an angular keyword? I could not find it in the manual (http://docs.angularjs.org/api/ng.directive:ngBind)
class="ng-binding" is used internally by Angular. For example, looking at the ngBind source we find this line that adds the class and associates the binding with it using .data:
element.addClass('ng-binding').data('$binding', attr.ngBind);
That's why this line of Angular source (noting the double curlys on {{todo.title}} result in an ngBind):
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
Is translated into what you see in the debugger:
<label ng-dblclick="editTodo(todo)" class="ng-binding">fghfgh</label>
So class="ng-binding" isn't something you should use. You'll find Angular frequently uses classes, comments and other markers- so you'll often see this kind of change between the original html and the Angular processed results.
From the docs:
ng-binding
Usage: angular applies this class to any element that is attached to a
data binding, via ng-bind or {{}} curly braces, for example. (see
databinding guide)
So the class ng-binding is applied by angular dynamically, for the compiler to understand that, element has a data binding associated with it.
As a developer we don't have to worry about that unless we apply some styles to these classes.
I'm building a reasonably non-trivial Angular-js application for the first time and am trying to establish some intuition about how to get things done. Most things are making sense, but there's one pattern in particular that has me stumped -
Whenever I place an "include" style directive inside an ng-switch, it is ignored. I've experimented with just about every style of ng-switch, ng-include, and ng-transclude I can think of to achieve the desired behaviour, but to no avail. I haven't noticed any documentation indicating that this would be disallowed, nor any equivalent style of pattern.
Here is an example of what I have tried to do:
<div ng-switch="is_logged_in()">
<div ng-switch-when="true">
logged-in:
<div ng-include="'views/logout.html'"> </div>
</div>
<div ng-switch-default>
not-logged-in
</div>
</div>
The expected behaviour being that the logout form is displayed when $scope.is_logged_in() returns true.
The behaviour I see is that "logged-in:" is displayed, but the include isn't.
I've tried various versions of Angular-js. I've inspected the network traffic and seen that the include is in-fact being fetched, but I can't get this to work. I've had the same behaviour manifest when trying to build my own template control structures using directives.
The way I've seen most examples dodge this is by using JS in a directive to manually show/hide various sections of the transcluded content - is this really the idiomatic way to get the behaviour I'm looking for?
Thanks!
While using ng-include I always assign the path to a variable in controller.
$scope.logoutlink ='views/logout.html'
And in the view you can assign as
<div ng-include="{{logoutlink}}"> </div>
It would be helpful to post a JSfiddle link.