Dynamic angularjs template - javascript

I am trying to create a directive this way -
scope.nodeTemplate = '{{node.nodeText}}';
Part of template
'<ul>' +
'<li class="tree-node" data-ng-repeat="node in nodes">' +
'<span>' + scope.nodeTemplate + '</span>' +
'</li>' +
'</ul>'
Based on some condition I would like to change the nodeTemplate and it can be an html string like -
'<input type="text"/>'
But the issue is when it try to do this thing angular does not render the html. It simply puts the html string. I am kind of stuck here. Can someone suggest some solution?

You need to use ng-bind-html-unsafe like:
'<span ng-bind-html-unsafe="nodeTemplate"></span>'

Related

How to dynamically assign a class (based on the outcome of if - else) to a span tag of a popover tooltip that uses Bootstrap Tagsinput

//My js file has the following
$mytag.popover({
html:true,
trigger: hover,
container: $mytag,
template: '<div class="popover" role="showDetails">' +
...//other
'</div>',
content:'<div class="info">' +
...//other
'<div class="myrow">' +
'<span>' + 'Result:' + '</span>' +
'<span>' + item.result + '</span>' +
+ '</div>' +
});
The value of item.result is calculated elsewhere (js). The final outcome is expected to be a Boolean value. I'd like to append a css class here instead of displaying the outcome.
Eg: If item.result is true. I'd like to add class="ok" to the span tag.
'<span class="ok">' + '</span>' +
If item.result returns false. I'd like to add class="notOk" to the span tag.
'<span class="notOk">' + '</span>' +
Can someone please advise what is the best way to achieve this?.
Thanks in advance.
Have you tried adding an id to the span and then using the element.classlist.add('class_name') function?
Add an if statement where the item.result is calculated to add the class to the span like:
if (item.result) {
document.getElementById("result-span").classList.add("ok");
}
else {
document.getElementById("result-span").classList.add("notOk");
}
HTML DOM classList Property
you can achieve this with string interpolation.
`<span class="${calcutationFn() ? 'ok' : 'noOK'}"> ... </span>`

Apply filters in AngularJS controller

I am newbee to angular and have this filter to translate the text (localization) which works well in my html/view:
<input type="button" class="btn btn-link" value="{{'weeklyOrdersPage.reposting' | translate}}" ng-click="sortBy('reposting')" />
What this does is to take the value from one resource file and display text and it works very well.
Now, I need to do something similar in controller where I am rendering a google map using javascript api. I need to set the text of the marker based on the language i choose. I tried this and it didn't work:
var markerConter = '<div class="infoWindowContent">' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelId'}}") + ': </b>' + panel.id + '</div>' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelClassification'}}") + ': </b>' + panel.panelClassification + '</div>' +
'<div><b>' + $filter('translate')('{{weeklyOrdersPage.quality}}') + ': </b>' + panel.format + '</div>'
'</div>';
Any pointers on how to move forward?
You don't need to use {{}} when writing code in controller
$filter('translate')('weeklyOrdersPage.panelId')
$filter('translate')('weeklyOrdersPage.panelClassification')
$filter('translate')('weeklyOrdersPage.quality')
That should solve the problem.

How to auto indent html written as a string?

I have a looong string of HTML inside a Javascript.
Is there any way I can auto indent it?
The conventional way in Sublime Text (pressing F12) won't work because Sublime doesn't know it's HTML.
Here's a portion of it:
'<ul class="obj-ul">' +
'<li ng-repeat="(key, val) in argVal">' +
'<p class="arg-key">{{key}}</p>' +
'<span class="arg-colon">:</span>' +
'<div ng-if="utils.isPrimitive(val)" class="inline-block">'+
'<p ng-click="editVal=!editVal" ng-show="!editVal" class="arg-val">{{argVal[key]}}</p>' +
'<input ng-show="editVal" ng-model="argVal[key]" ng-blur="editVal=!editVal" class="arg-val" />' +
'</div>'+
'<div ng-if="!utils.isPrimitive(val)" class="inline-block">'+
'<rapid-args arg-val="argVal[key]"></rapid-args>' +
'</div>'+
'</li>' +
'<div ng-if="utils.showButtons.showButtonInObject(templateArgVal)">' +
'<button ng-click="vars.show_addObjectItem=!vars.show_addObjectItem">+</button>'+
'<div ng-if="vars.show_addObjectItem" class="add-item">'+
'<input ng-model="newKey" type="text" class="arg-key"/>'+
'<span class="arg-colon">:</span>' +
'<div id="new-value">'+
'<div ng-if="!vars.show_addObjectValue" class="value-types">'+
'<p ng-click="objects.addItem(argVal, newKey, \'array\'); vars.show_addObjectItem=!vars.show_addObjectItem" class="value-types-type">Array</p>'+
'<p ng-click="objects.addItem(argVal, newKey, \'object\'); vars.show_addObjectItem=!vars.show_addObjectItem" class="value-types-type">Object</p>'+
'<p ng-click="vars.show_addObjectValue=!vars.show_addObjectValue" class="value-types-type">String</p>'+
'<p>{{showValInput}}</p>' +
'</div>' +
'<div ng-if="vars.show_addObjectValue">'+
'<input ng-model="newVal" type="text" class="arg-key"/>'+
'<button ng-click="objects.addNewKeyVal(argVal, newKey, newVal); vars.show_addObjectValue=!vars.show_addObjectValue">&#10003</button>'+
'<button ng-click="vars.show_addObjectValue=!vars.show_addObjectValue">Cancel</button>'+
'</div>' +
'</div>' +
'</div>' +
'</div>'+
'</ul>' +
Sort of what Mouser suggested in a comment, you're going to have to remove the apostrophe's and plus signs from this code using a find+replace tool (notepad++ has one, I'm sure sublime will have one too) then do your formatting thing with F12 in sublime and then re-add your apostrophe's and plus signs using regex.
Here's a demonstration of how to remove your string formatting using Notepad++ (or any Regex based find and replace string manipulator):
Find What: '(.*?)'[\s]?\+
Replace With: $1
To add them back again after you've formatted you can simply do:
Find What: (.*)
Replace With: '$1' +
Here's a way:
Remove all the quotes and + used to concatenate the different lines, i.e., make it a single string (you may use search-replace -> replace all) without any + in between to join.
Copy the resulting string and paste at http://www.freeformatter.com/html-formatter.html or any other online html formatter.
Copy the result and paste it back.
Hope it helps.

mootools javascript template engine

I'm using this great javascript mootools template engine: https://github.com/tbela99/template
My template looks like this:
var tmpl = '<ul>' +
'{repeat:products}' +
'<li class="small">' +
'{photos.0.name}' +
'{name}' +
'</li>' +
'{/repeat:products}' +
'</ul>';
My data below:
var data = {"products":[{"id":"449","name":"Apple","photos":[{"name":"image.jpg"}]}]};
new Element('div',{'html':template.substitute(tmpl,data)}).inject(document.body);
And my question:
How to add custom modifier (.addModifier function) inside current context {repeat:products} and pass a value: {photos.0.name} ?
For example: {repeat:products}{customtag photos.0.name}{/repeat:products}.
Thanks!
The modifier first argument is the current object in the loop :-)

Conditional javascript for Google Map values

I'm passing some variables to my google maps scrip to output an address in an info window. The variables are being pulled from a database, but not all of them will always exist. Using the following code I sometimes end up with multiple <br> tags in a row, meaning I get awkward breaks in the content.
So my question is how do I make it conditional so that only the variables that exist will display, followed by a <br>?
var contentString = '<div id="map_info">'+
'<h4>' + gmapsstring.gmapaddressname + '</h4>'+
'<div id="bodyContent">'+
'<p>' + gmapsstring.gmapaddressstreet + '<br>' +
gmapsstring.gmapaddressline2 + '<br>' +
gmapsstring.gmapaddressline3 + '<br>' +
'<span class="gmap_postcode">' + gmapsstring.gmapaddresspostcode + '</span></p>'+
'</div>';
Any suggestions would be greatly appreciated.
Thanks
You can use the length property of the variables, so you'd have something like:
var contentString = '<div id="map_info">';
if( gmapsstring.gmapaddressname.length > 0 ) {
contentString += '<h4>' + gmapsstring.gmapaddressname + '</h4>';
}
and so on. Or even better, you can loop through the properties, using a similar code.

Categories