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.
Related
Is it possible to get the id of from the route.queryparams?
I have done this in vue js
<div id="{{this.$route.query.data}}" class="col-md-12>{{data}}</div>
Yes, you can use the v-bind directive, or : for short, also no mustache for attributes in Vue 2:
<div :id="this.$route.query.data" class="col-md-12>{{data}}</div>
I am trying to connect some different html code to my view with ng-bind-html.
I already added ngSanitize
Firstly I am using ng-for by ui-select-choices
<ui-select-choices repeat="test in dataTest>
. and I want to bind test.name with some Html
<small> ( {{ TEST_BTN | translate }}) </small>
The Test_BTN is being used for Translation purpose there fore I can't leave it out from code.
when I try to use them all in ng-bind-html nothing will be shown
when I try to use them all in ng-bind the html code will be shown.
when I try to use ng-bind andng-bind-html seperetly , ng-bind-html html won't be shown.
How am I suppose to fix this?
EDIT : I am trying to show the result in a new div with ng-if
something like : <div data-ng-if="test.isSomething" ng-bind="test.name" ng-bind-html="' <small>({{'BTN_ADD' | translate}})</small>'" ></div> (Which doesnt show the ng-bind-html part )
EDIT 2 :
I deleted the {{ }} from data-ng-bind-html and used the translation explicitly with the $translate service in my controller.
And It worked.
You can't use ng-bind and ng-bind-html on the same element, and you can't use {{}} in either one of them. It's not necessary to concatenate the <small> tag inside the ng-bind-html, it should be in the template itself. And you have some syntax error nested-quotes issues in your ng-bind-html clause.
It's not clear to me from your description which of test.name, TEST_BTN or BTN_ADD you actually intend to use; I'm going to assume you really want test.name here but if one of those other variables contains the HTML you're trying to embed, just substitute its name in place of test.name:
<div ng-if="test.isSomething">
<small ng-bind-html="test.name | translate"></small>
</div>
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
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"
I'm trying to create new ngControllers on the fly, is this possible? I'm not writing it into the template with a ngRepeat or anything, since the user might never create an instance of a certain ngController.
Here's an example of my current template:
<div ng-controller="ViewUsers">
<div class="viewUsersList">
<table>
<tr class="userRow" ng-click="viewUser(user.user_id)" ng-repeat="user in users">
<td>{{user.first_name}} {{user.last_name}}
<br />{{user.phone}}
</td>
</tr>
</table>
</div>
</div>
So far it works great. When the user clicks a .userRow it calls viewUser(ID). The problem is here:
I want to create a new block of code like this:
<div ng-controller="UserDetail">
{{first_name}}
</div>
And append this to the DOM.
So if they click on Bobby and Sally, two UserDetail controller objects would be added to the DOM and work accordingly. (Ideally, I'd like to pass in the data-bound user model, but that's for later).
I tried a ghetto version in JSBin, but I'd rather not use JQuery if possible:
http://jsbin.com/EdOteTav/2/edit
Can anyone shine some light on this? Thanks in advance
I would change the code little bit and use directive instead of controller. See this simple and quick example in jsfiddle.
The directive would handle the click events and display whatever you want to display on the DOM. You can get the full user object from scope.user inside the directive.