This is my first question here and I'm only asking because I really couldn't find an answer anywhere - or couldn't figure out how to make it work for me at least (I'm a huge noob when it comes to HTML and Ionic).
Here's the thing:
I'm using Ionic and I want to make a text variable work as an HTML object. Instead, it ends up being merely displayed as text (with tags and everything) on the page.
TypeScript (dice.ts)
export class Dice {
...
dice = 4;
result = 0;
teste = "<h2>Teste</h2>";
...
HTML (dice.html)
<ion-content padding>
<h1> TITULO </h1>
{{teste}}
...
</ion-content>
Outcome
TITULO
<h2>Teste</h2>
In other words, it did not create a "header2", but just showed the original string.
You can try something like this:
<ion-content padding>
<h1> TITULO </h1>
<div ng-bind-html-unsafe="teste"></div>
</ion-content>
also, some more reference: AngularJS : Insert HTML into view
Ogari,
Please try
<div [innerHTML]={{teste}}></div>
You will find more about this at this link
Related
I am using a cool little AngularJS filter for emoji characters located at: http://dev.venntro.com/angular-emoji-filter/ and this is my code I have so far.
<p class="chatmessage plain ng-binding" ng-repeat="message in messages track by $index" ng-model="message" ng-bind-html-unsafe="message | emoji">
<b>{{message.Author}}:</b>{{message.Message|emoji}}
</p>
It gives me the following output:
User123: <i class='emoji emoji_smiley'>smiley</i>
obviously, I'd rather have the emoji icon, but that is what gets output to the page. This is almost a win for me even at this stage as I had to figure out how to add all of the appropriate references to get the message filter to work and get this far. Now I am trying to come up with a way to make the "message.Message" render the HTML rather than just giving me the HTML code itself.
I am wondering if there is a function that I can wrap around that to force it to render this emoji rather than the HTML?
Thank you for any help
Sincerely,
New kid to AngularJS
I think you need to try with below ng-repeat code :
<p class="chatmessage plain" ng-repeat="message in messages track by $index">
<b>{{message.Author}}:</b><p ng-bind-html-unsafe="message.Message | emoji"></p>
</p>
I'm trying to make a javascript function that displays different string every 7 days for example. And I want to display that string in a footer of an html.
The part that bugs me is how to insert that string in a paragraph in html (or anything that will display the text).
I have 2 dimensional array in .js, let's say:
array = [[first1,first2],[second1,second2],[third1,third2],[fourth1,fourth2],[fifth1,fifth2]];
And I want do display, let's say
array[2][0] in one paragraph and
array[2][1] in another paragraph.
let's say
<div>
<p>In here i want array[2][0]</p>
<p>In here i want array[2][1]</p>
</div>
Please help.
HTML:
<div>
<p>In here i want <span id="placeholder-1"></span></p>
<p>In here i want <span id="placeholder-2"></span></p>
</div>
JS:
document.getElementById('placeholder-1').innerHTML = array[2][0];
document.getElementById('placeholder-2').innerHTML = array[2][1];
Fiddle: http://jsfiddle.net/8N95j/
select the html element by document.getElementById/getElementsByClassName and attach the js value like
var ele = document.getElementById('footerid');
ele.innerHTML += array[2][0];
note: getElementsByClassName would give u an array
update
here is a working fiddle using the same markup u shared.
One different approach would be to use a framework like Ember or AngularJS. These are quite easy to put in place nowadays, and leads to much easier to maintain code. For instance, your HTML would look like
<div ng-controller='MyController'>
<p>In here i want {{ array[2][0] }}</p>
<p>In here i want {{ array[2][1] }}</p>
</div>
where MyController references an AngularJS controller (basically a simple javascript object which defines a $scope in which the array is defined.
At that point, you no longer need to update the HTML, ever. Whenever your javascript does something like array[2][0] = 'foo' the HTML is automatically updated in real-time.
Use the below code to dynamically create a p tag and append it in a container div
HTML :
<div id="container">
<p>In here i want Test1</p>
</div>
JS :
var array = [['first1','first2'],['second1','second2'],['third1','third2'],['fourth1','fourth2'],['fifth1','fifth2']];
//If needed for loop can start here
var para = document.createElement("p");
para.innerHTML = 'In here i want ' + array[2][0];
document.getElementById('container').appendChild(para);
DEMO
I have AngularJS web app, which is capable of sending different http methods to our Restful WS. Each request has a preview, where all of it's properties are listed and can be changed in place. Everything works fine except the formating for inputing JSON. It looks like this:
And I would like it to look like this, except that JSON text was displayed like in picture 1:
Shortly, I need that the left side was as in 1 pic, and the right side - as in the second pic.
Here's piece of code, which is responsible for generating input for JSON:
<div ng-show="field.restResourceName != null">
<p ng-show={{field.isRequired}}>{{field.name}}*: </p>
<p ng-show={{!field.isRequired}}>{{field.name}}: </p>
<accordion id="entityField" close-others="oneAtATime">
<accordion-group heading={{field.name}} is-open="false">
<p>JSON:</p>
<textarea ng-change="getCreateEntityAsText()" ng-model="createEntityResource[field.name]"></textarea>
</accordion-group>
</accordion>
</div>
And here's the one, responsible for showing the output:
<div class="preview">
<p>Preview: </p>
<textarea class="form-control" ng-model="createEntityTextAreaModel"></textarea>
</div>
AngularJS controller functions, which parse JSON into model and vice versa:
//CREATE ENTITY JSON PARSE
$scope.getCreateEntityAsText = function () {
$scope.createEntityTextAreaModel = JSON.stringify($scope.createEntityResource, null, " ");
};
$scope.$watch('createEntityTextAreaModel', function () {
applyParseValues($scope.createEntityTextAreaModel, $scope.createEntityResource);
});
applyParseValues = function(textAreaModel, entityModel){
if($rootScope.isNotEmptyString(textAreaModel)) {
angular.copy(JSON.parse(textAreaModel), entityModel);
} else {
angular.copy({}, entityModel);
}
}
Any ideas how this can be achieved? Every useful answer is highly appreciated and evaluated.
Thank you.
It looks like you're mostly having a styling issue, which is addressed in this question:
JSON formatter lib
Otherwise, Angular comes with a built-in filter for JSON, which can be used in a view like this:
<p>{{someObject | json }}</p>
Links:
https://docs.angularjs.org/api/ng/filter/json
https://docs.angularjs.org/api/ng/filter/json
Im sure this is probably a stupid question...
Im using chance.js because I want the main <h1> on my site to display something different each time you reload the page.
So if i put the following into my functions.js file:
$(window).load(function() {
document.write(chance.pick(['hello', 'GDay']));
});
how to I get the word to appear inside my <h1> </h1> tags in my html file ?
The document.write method will output that text where it is called. If you call it between the tags, it will output that text between the tags.
Give the <h1> tags an ID, like this:
<h1 id="title">text here</h1>
Then, instead of document.write, do something like this:
$("#title").html(chance.pick(['hello', 'GDay']));
I make an AJAX call that gives me a string within a JSON object containing text formatted like this:
Your girl was in Berkeley with a communist reader. <br> Mine was entombed within boombox and walkman. <br> I was a hoarder, but girl, that was back then. <br> The gloves are off, the wisdom teeth are out. <br> What you on about? <br> I can feel it in my bones. <br> I can feel it in my bones. <br> I'm stronger now, I'm ready for the house. <br> Such a modest mouse. <br> I can't do this alone.
I use this string to populate a div on my webpage, such that it appears like this:
<div class="lyrics-container>{{ the text in the JSON string }} </div>
However, when populating the div with that text, I get the exact string, meaning that the <br>s show up as text. I want them to actually perform their function and break the line. Is there a way to coerce the browser into interpreting HTML within a string?
I'm using Angular to grab the data and populate the div if that makes any difference.
It is not straight forward. You need to use ngBindHtml.
Controller
$scope.content = "<b>this is bold content</b>";
HTML
<div ng-bind-html="content"></div>
You'll need the following module:
http://code.angularjs.org/1.0.3/angular-sanitize.js
Be sure to declare ngSanitize as a module dependancy, like this:
var app = angular.module('angularjs-starter', ["ngSanitize"]);
You can use ng-bind-html-unsafe.
<span ng-bind-html-unsafe="content"></span>
Demo