How to get paragraph data in textarea in angularjs? - javascript

how can I get paragraph content text in textarea value
<p ng-model="extrap" >Some parragraph content</p>
<textarea ng-model="oneps"></textarea>
<script>
(function() {
angular
.module("TextAngularDemo", ['textAngular'])
.controller("DemoController", ['$scope', 'textAngularManager', DemoController]);
function DemoController($scope, textAngularManager) {
$scope.oneps = {{extrap}}
};
})();
</script>
I want paragraph text in textarea box with prefilled paragraph text

I think you need to load a paragraph and text area with the same content, but you don't need to update the paragraph while the textarea value is changed. In that case you can go for one way data binding in angular js.
This can be achieved by adding :: inside your interpolation symbol like {{::yourModalValue}}
See the example below to see the implementation.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myParagraphContent = "Some initial content.";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<b>Change the text area fild and see the change in me</b>
<p>{{myParagraphContent}}</p>
<b>Change the text area fild and see I won't be changes</b>
<p>{{::myParagraphContent}}</p>
<textarea ng-model="myParagraphContent"></textarea>
</div>

Related

How to change textarea value dynamically?

I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().

How to append div dynamically lower part of div tag?

I want to add div dynamically lower part of a div like chat box in Facebook or whats-app. Whenever I want to add dives it add from upper part of the body.
This might help!.. for your dynamically add divs and for chat like css, you'll need to modify your css.
var app = angular.module('myapp', []);
function MyCtrl(){}
MyCtrl.prototype = {
addElement:function(){
var newEle = angular.element("<div class='red'>new div!</div>");
var target = document.getElementById('target');
angular.element(target).append(newEle);
}
};
app.controller('myCtrl', MyCtrl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl as $ctrl">
<button type="button" ng-click="$ctrl.addElement()">Add Element</button>
<div id="target"></div>
</div>

I want to change text with a button

I want to provide all my posts on my blog in 2 languages. I found a way to change the text into another language with buttons. But I can't put any images or other css styles in the text that changes. Then the buttons don't work anymore.
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. I can't put any css or html in here';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another language';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
Is there a way I can make something like this but with a code where I'm able to put images, font styles,... in the code?.
Or is there maybe a way to only change the text. And leave the images with multiple divs?
TEXT (changes)
IMAGE
TEXT (changes)
http://oihanevalbuenaredondo.be/2017/01/17/current-favorites-voorbeeld/ --> this is an example of a post i want in 2 languages. I need multiple images, al the text in the post needs to be changed from one language to another, with buttons
You need to iterate over all the children of your element. Using JQuery, and assuming just one level of descendants, you could use something like this...
$('#chgtxt').children().each( function() {
var oldtext = $(this).text();
if (oldtext) {
var newtext = oldtext+" CHANGED. ";
$(this).text(newtext);
}
});
You can create your own using this simple code, it simply gets an entry and replace it by it's value in the array. Ex :
var lang = {
"helloWorld": {
en: "Hello World",
fr: "Bonjour monde"
},
"mynameis": {
en: "My name is",
fr: "Mon nom est"
}
}
$(document).ready(function(){
$(body).find('.trn').each(function($elem){
var currentLang = 'en';
$($elem).html(lang[$($elem).data('trn')][currentLang]);
});
});
For each text your need to add a data with the key and a class trn, just like this.
<span class="trn" data-trn="mynameis"></span> Nicolas
Check this link for more informations
hopes it helps !
Nic
You have a single quote in the text of the first onclick "can't" which is causing the javascript to think that it is the end of the string.
You need to add a backslash "can\'t"
<button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>This is the default text. I can\'t put any css or html in here';">English</button>  <button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>Text changed into Another language';">Other language</button>
<div id="chgtext"><p>Blue</p>This is the default text. I can't put any css or html in here</div>
<style>
p {color:blue;}
</style>
You need to escape all quotes inside of inserted content. Have a look at snippet and try to click on buttons
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> NOW I can put any css or <span style=\'color :red;\'>html</span> in here';">English</button>  
<button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
<p>
<style>
#eng_lang {
display: block;
}
#nl_lang {
display: none;
}
</style>
<button onclick=" document.getElementById('eng_lang').style.display='block'; document.getElementById('nl_lang').style.display='none'">English</button>   <button onclick="document.getElementById('eng_lang').style.display='none';document.getElementById('nl_lang').style.display='block'">Nederlands</button></p>
<div id="eng_lang">
<h2>Here is some text
<span style="color: green;">english</span>
</h2>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo2yKPonCY-BZrk9s69oH_-gal_yxDRgHxdyXhqP79D0YESVuB" width="120px" height="120px">
Now you can place here any text, tags and images.
</div>
<div id="nl_lang">
<h2>Here is another text
<span style="color: blue;">Netherlands</span>
</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQcE1c0chXugmq_V5qwp51ffAuP7ecGMsWmshnntwAXVGUgVptH" width="100px" height="100px">
Put here whatever you want.
<p>This is paragraph</p>
</div>

Manipulate html string with Jquery ( in Angular application for wysiwyg editor )

I have a wysiwyg editor that uses a $scope.variable as it source of HTML.
Now i need to insert divs into certain parts of the HTML string. So i can programmatically append, prepend, remove etc. parts of the shown content in the wysiwyg. But i can't get the manipulation to work.
Should be simple to insert things into the dom right? But nothing gets appended in this example:
JAVASCRIPT:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.obj = {};
// html string
$scope.obj.htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
$($scope.obj.htmlString).find('.container').prepend('<b>text inserted into container div</b>');
// insert the elements to dom
angular.element('.insert-here').prepend($scope.obj.htmlString);
});
HTML:
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="insert-here">
</div>
</body>
PLUNKER:
https://plnkr.co/edit/dCzQF6YYth5NFOTkVahy?p=preview
You need to use .container selector and get the html out of the DOM
var htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
var $html = $('<div>' + htmlString + '</div>').find('.container').prepend('<b>text inserted into container div</b>');
htmlString = $html.html();
alert(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use the module ngSanitize to get the directive ngBindHtml to accomplish this. You should not have to manipulate the DOM directly when using Angular. Check out “Thinking in AngularJS” if I have a jQuery background?
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
<div class="insert-here" ng-bind-html="insertHere"></div>
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
/* Styles go here */
.insert-here{
border: 2px solid red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="wrapper-div">wrapper div
<div class="container">container div
<div class="inner-div">inner div</div>
</div>
</div>
<div class="insert-here" ng-bind-html="insertHere">
</div>
</body>

Bootstrap: Change text of small

I have the following issue with Twitter Bootstrap and jQuery:
I have a title, in h1, and a subtitle, in small. I want to change the text of both, using jQuery. My code is the following:
HTML:
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>
JavaScript:
$(document).ready( function() {
$('#h1id').text('I can change this');
$('#smallid').text('But not this');
});
The h1 is changed, but the small-element disappears. How can I fix this?
Live example here
Wrap hello world in a span
HTML
<h1 id='h1id'>
<span>Hello World</span>
<br>
<small>Here I am!</small>
</h1>
JavaScript
$(document).ready( function() {
$('#h1id span').text('I can change this');
$('#h1id small').text('But not this');
});
Add another div or span like this :
<h1 id='h1id'>
<div id="something">
Hello World
</div>
<br>
<small id='smallid'>Here I am!</small>
</h1>
$(document).ready( function() {
$('#h1id #something').text('I can change this');
$('#h1id #smallid').text('But not this');
});
The .text() function replaces all content in the H1 tag therefore removing the span tag from the DOM.
You can append the span with jquery like the following fiddle shows:
http://jsfiddle.net/nkzbzm7f/1/
html
<h1 id='h1id'>
Hello World
</h1>
javascript
$(document).ready( function() {
$('#h1id').text('I can change this')
.append("<br>")
.append("<small>Here I am!</small>");
});
If you change the H1 the small text disappears because it's part of the H1. Adding extra divs or spans isn't nice. keep your html slim!
change h1 text only:
$('#h1id').html('new text<br><small>' + $('#h1id small').html() + '</small>' );
change small text only:
$('#h1id small').text('new text');
change both:
$('#h1id').html('new test<br><small>new also</small>');
Instead you should cache it in a var before replacing the text:
$(document).ready( function() {
var smallid = $('#smallid'); // cache it here.
$('#h1id').text('I can change this. ');
smallid.text('changed').appendTo('#h1id'); // now change and append it again.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='h1id'>
Hello World
<br>
<small id='smallid'>Here I am!</small>
</h1>

Categories