I'd like to render raw html snippet inside angular's double curly braces, but couldn't find a way to do it.
I know there's ng-bind-html directive for binding raw html text, but this only works inside a tag (I mean it replaces the contents of a tag), but I want to insert a html snippet without enclosing it in any tag.
Example:
<div class="row">
<div>....</div>
<div>....</div>
.....
<div>...</div>
{{</div><div class="row">}} <- here's what i'd like to insert - close a row and start a next one
<div>....</div>
<div>....</div>
.....
<div>...</div>
</div>
So, if you look at the html structure above, I want to insert a closing tag and immediately open a new one. This has to be done dynamically, because all the content is dynamic and I would like to divide it into rows depending on the data model.
Any ideas?
I'm not sure about what you wanna do, and I'm very sure, that it's not the best way or even smart, but you can try this:
{{'</div><div class="row">'}}
Define one variable in your scope:
$scope.rowHtml = "<strong>Your text here</strong>"
Assign it to ng-model of your <DIV>
<div class="row" ng-model="rowHtml ">
Related
Using jquery, is there a way to capture all the code between two divs?
For example; using the code below, if Show info is clicked than the code between the ws-css-table divs should be retrieved, i.e.
<div class="ws-css-table-tr"><div class="ws-css-table-td">A</div>... <div class="ws-css-table-td">D</div></div>
should be put into a text variable.
Here is a fiddle for the current code.
Thanks for any help.
<div class="ws-css-table">
<div class="ws-css-table-tr">
<div class="ws-css-table-td">A</div>
<div class="ws-css-table-td">B</div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td">C</div>
<div class="ws-css-table-td">D</div>
</div>
</div>
</br>
<div class='show_div_info'>Show info</div>
jquery
$(".show_div_info").click(function(){
alert ("info?")
});
Here's the classic javascript and a single liner technique using innerHTML:
$(".show_div_info").click(function(){
alert($('.ws-css-table')[0].innerHTML);
});
https://jsfiddle.net/vy5mok8k/3/
$(".show_div_info").click(function(){
var children = $(".ws-css-table").html();
$(".children").html(children);
});
https://jsfiddle.net/vy5mok8k/2/
Do you mean to capture the elements inside the table and do something with it later?
$(".show_div_info").click(function(){
var table = $(".ws-css-table");
// Do something
});
Do you mean to capture the literal code inside the table? Say hello to the html() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").html();
// Do something
});
Do you mean to capture the actual text inside the table? Say hello to the text() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").text();
// Do something
});
The more practical one would be the first one, since you will be able to use it to manipulate the elements inside as you need.
Second one just grabs the actual code, perhaps you need it to show off your awesome skills.
The last one will print the text, neat if you use it to parse or log what you have thus far done.
How did that help?
I'm using ckeditor to get what user has inputed in the textarea , but when I want to show/render that field in my page it just shows the html tags not the rendered one !
It's odd cause even tags aren't escaped and everything looks like a pure html syntax which is just not rendered !
what is stored in mongodb is this :
"longDesc" : "<p style=\"text-align: left;\">We need creation of <strong>7 animated banners</strong>.</p>\n\n<p style=\"text-align: left;\">We need to remake to dynamic form. We provide you open source data and technical specifications.</p>\n"
and am using angularjs double brace in view to show this expression .
{{job.longDesc}}
and the output exactly is :
<p style=\"text-align: left;\">We need creation of <strong>7 animated banners</strong>.</p>\n\n<p style=\"text-align: left;\">We need to remake to dynamic form. We provide you open source data and technical specifications.</p>\n
Take a look at ngBindHtml. You just need to:
$scope.myHTML = '<p>test</p>';
....
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
You will need to include the ngSanitize in your app dependency to make the ng-bind-html work. Here is an Plunker example:
http://plnkr.co/edit/RRNyiwQAaHQfNqtHslCD?p=preview
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
This should be a simple matter of updating some simple modal controls with .html() but for some reason, I'm having issues. This is the modal code...
<div id="answerTaskQuestionModal" class=" modal-dialog" data-bind="with: currentQuestion">
<div id="answerTaskQuestionValidation" class="validation"></div>
<span data-bind="text: html"></span>
<div id="taskQuestionAnswer"></div>
</div>
And here is the JavaScript inside my working view model...
self.answerTaskQuestion = function (question) {
$('#answerTaskQuestionValidation').html('');
var $taskQuestionAnswer = $('#taskQuestionAnswer');
$taskQuestionAnswer.html(' \* {my html with bindings} *\ ');
$answerTaskQuestionModal.dialog('open');
self.currentQuestion(question);
};
Basically, I'm trying to dynamically change the ways one can answer a question as a proof of concept. If I just paste the html inside the target div, they work. However, when I check the value of .html(), this is what happens...
first run: $taskQuestionAnswer.html() returns undefined
second run: $taskQuestionAnswer.html() returns the proper HTML but the div won't update.
Replacing the bindings with just simple HTML doesn't help either. What am I missing here?
I think after $taskQuestionAnswer.html(' \* {my html with bindings} *\ ');
you should call ko.applyBindings(myViewModel) again to apply view model to new html.
i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";
Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.
Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div