I have a template that contains the following fragment:
<spark class="col-12" value="80"></spark>
I also have a variable accessible to this template as {{ratio}} such that if I change my fragment to:
<spark class="col-12" value="80"></spark>
Ratio: {{ratio}}
the correct ratio will be displayed on a page.
This is what does not work:
<spark class="col-12" value="{{ratio}}"></spark>
which results in "{{ratio}}" string being displayed.
Any ideas ?
You should be using the built-in directives for adding attribute values from the scope, for example ng-src, ng-style, ng-href, so on.
Documentation for the built-in directives
Will ng-attr work for you? ng-attr-value="{{ratio}}"
https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
Related
Let's say we have the following HTML template:
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput">Stichwort:</label>
<input id="someinput" type="text"/>
</div>
</div>
</template>
Now I like to render a list with multiple items based on that template.
I know that we can just clone the template and use selectors on it as on a regular DOM.
But is there also an alternative way to clone, etc... but with data, so that we can set the content without using selectors, but variables?
Something like the following, we just declare the variable ID before adding the template?
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput_${ID}">Stichwort:</label>
<input id="someinput_${ID}" type="text"/>
</div>
</div>
</template>
I know it is possible with template literals, but I am just curious if this also works in any way with theses handy template tags?
Is it at all possible to set data in a temple tag without using selectors on it?
Is it at all possible to set data in a temple tag without using sectors on it ?
No, not in the way you mean. (The literal answer to the question quoted above is "yes" but only because you can modify the DOM without using selectors, per se — by doing the DOM traversal yourself. Not a useful "yes." 🙂 )
HTML template tags don't have an "evaluate with these variables" method or similar. As you've said in the question, you could always write a function that uses a JavaScript template literal to build the HTML instead (and then use insertAdjacentHTML() or innerHTML to add it to the DOM).
I made a custom attr directive and i will use it in siblings elements like:
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAttrDirective]="'value'">4</div>
</div>
I olso made a service that control all of my directives. Inside this it I want to know the count of my directives customAttrDirective.
PS: I can't do it by searching by class name(because i add classes inside the directive) and i can't do it by searching by attribute (directive name) because angular change.
Edit: replaced wrong sintax customAttrDirective="'value'" to [customAttrDirective]="'value'"
Many thanks.
Assuming your custom attribute directive's class name is CustomAttrDirective, in the component that you are using your custom directives, add this:
#ViewChildren(CustomAttrDirective) dirs: QueryList<CustomAttrDirective>
Then in life circle ngAfterViewInit, get the length of variable dirs.
I'm using angular grid -
let's say i have a scope object as follows:
$scope.test = 3
If I want to dynamically set an html id, I would do something like this:
<div id="{{test}}"></div>
Checking the DOM, I see the following:
<div id="3"></div>
For my angular grid, I want to do something like this:
<div ag-grid="{{test}}"></div>
Checking the DOM I literally get:
<div ag-grid="{{test}}"></div>
Is there a way around this?
You can use ngAttr and do this like the following:
ng-attr-ag_grid="{{test}}"
Please check if this helps
Use
<div ag-grid="test"></div>
Check following link and check first example html file forag-grid tag with binding variable
Note: Based on example test should be object not string or other type.
Is {{ }} necessary?
You can try:
ag-grid="test"
In my view, I have the below code to display some data from angular scope variables. The first two lines work fine. They display data from the scope variables but the line from ng-if does not display. What is wrong with my ng-if condition?
<div ng-controller="PaymentCtrl">
<h3>Payment successfully posted {{PaymentID}}</h3>
<h3> Receipt number {{ReceiptNumber}} </h3>
<div ng-if="{{ReceiptNumber}}">
<h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
</div>
</div>
As mentioned, ngIf takes an expression.
<ANY ng-if="expression"> ... <ANY>
See the AngularJS expression docs for more information on what this entails exactly. In your example, you are instead supplying an interpolated value. Try the following...
<div ng-if="ReceiptNumber">
<h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
</div>
JSFiddle Link - demo comparing both wrong and correct appreach
I'm using AngularJS with a third party service that generates html responses. I want to use ng-repeat to render the HTML responses as a list, however Angular renders it as text.
Is it possible to use ng-repeat to render HTML property?
I've created this jsFiddle to demonstrate my issue.
http://jsfiddle.net/DrtNc/1/
I think using ng-bind-html-unsafe will get you what you need.
<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div>
Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/
Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
The way I achieved this is by ng-bind-html inside the ng-repeat;
<div ng-repeat="comment in comments">
<div ng-bind-html="comment.content"></div>
</div>
Hope this helps someone!
item.html will always be interpreted as text. you have to convert it to html explicitly. click here
I have added a render function which will convert each string to html.