In jQuery I can do something like the following to add desired text inside a div or any element.
$( "#div1" ).html( "<span class='red'>Hello <b>Again</b></span>" );
How can I do similar operation using AngularJS.
I need to add a plain text inside a div when the user clicks on a link.
Here's what I have tried:
View:
<a ng-click="showProductText($index)">Click Me</a>
ng-controller:
$scope.showProductText = function () {
var myEl = angular.element(document.querySelector('#customerProductCatalogText'));
--need help hence forth--
};
In view
<div style="border:1px solid #ccc;padding:10px;" ng-bind-html="divText"></div>
and in Controller
$scope.divText = '<H2>some text</H2>';
You can do that in different way "more angular then jQuery" using directive "ng-if" please see here
http://jsbin.com/tuvom/1/edit
HTML
<body ng-app="app">
<div ng-controller="firstCtrl">
<div ng-repeat="item in products">
<h4>{{item.name}}</h4>
<button ng-if="!item.showdescription" ng-click="item.showdescription= !item.showdescription">Show description</button>
<button ng-if="item.showdescription" ng-click="item.showdescription= !item.showdescription">Hide description</button>
<p ng-if="item.showdescription">{{item.description}}</p>
</div>
</div>
</body>
JS
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope){
$scope.products = [
{name:"item one", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
{name:"item two", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
];
});
This link helped me solve the problem angular.element
This did the trick:
angular.element(document.querySelector('#customerProductCatalogText')).html("NewText");
Try this one
angular.element('#customerProductCatalogText').innerHTML="<span class='red'>Hello <b>Again</b></span>";
Related
I have literally no idea what I am doing. I managed to got this snippet together by copy & pasting:
$(function () {
$.ajax({
url: "json url",
success: function (result) {
$.each(result, function (index, item) {
$(".PostEntries").append("<div class='col-lg-4 mb-3 d-flex align-items-stretch' style='float:left'><div class='card'><img src="+item.picturePath+" class='card-img-top'>" +
"<div class='card-body'>" + "<small class='text-muted text-start'>Posted:" +item.Date_Created + "</small>" +
"<h5 class='card-title'>"+item.Article_Title+"</h5>" +
"<p class='card-text text-muted'>"+item.Blog_Entry_Text+"</p>" + "<img src="+item.PictureGallery_1+" width='60px'>" +
"</div>" +
"</div>" + "</div>" +
"</div>");
});
}
});
this is what the json url calls:
"Importance_Index": "0",
"ID": 24,
"Date_Created": "19/10/2022",
"Date_Last_Modified": "19/10/2022",
"Article_Title": "Some Title",
"Blog_Entry_Text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
"picturePath": "image.jpg",
"PictureGallery_1": "gallery-image.jpg",
"PictureGallery_2": "",
"PictureGallery_3": "",
"PictureGallery_4": "",
"URL_Video": "",
"URL": "some link"
}, {
"Importance_Index": "0",
"ID": 2,
"Date_Created": "24/06/2021",
"Date_Last_Modified": "02/12/2021",
"Article_Title": "Some Title",
"Blog_Entry_Text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
"picturePath": "image.jpg",
"PictureGallery_1": "",
"PictureGallery_2": "",
"PictureGallery_3": "",
"PictureGallery_4": "",
"URL_Video": "",
"URL": ""
},
The question here is how can I stop empty lines in the json from displaying. Not every article has an image or gallery. Currently the all posts without gallery images are displaying blue questions marks for missing images on my html.
I am sure there is a way to skip empty json entries from displaying.
As I said I know nothing about this and would appreciate your help.
Many Thanks in advance,
Heiko
$('a').filter(function(){return $(this).attr('href') === "" || $(this).attr('href') === "%"}).hide();
// Or, hide them
$("img").on("error", function() {
$(this).hide();
});
So, I found a work around myself. The first simply removes links that are blank or have in my case a "%" symbol (I added the % on every empty value). I tried the "#" but that would have removed parts of my navigation, specifically the drop-down menus.
The 2nd one just hides dead images.
This seems to be working but I was hoping to find a more elegant solution.
json data is coming from rest API with html tag like
(content: {rendered: "<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>āµ", protected: false})
how we convert HTML tag to text in angular7
{{x.content.rendered}} in angular 7
<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>
display code in HTML format
The result should without HTML tag in angular6-7
Destination Covered: Lorem Ipsum; Dolor
Could you use this ? Worked for me
var f = '<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p> ';
var e = document.createElement("div");
e.innerHTML = f;
document.getElementById("foo").innerText = e.innerText;
Please do leme know
simply you can use databinding for innerHTML like this
componenet
hello = "<h1>Hello from š </h1>"
template
<div [innerHTML]="hello"></div>
demo š§āāļø
here's my solution:
in the file ts
bypassSecurityTrustHtml(text: string) {
return this.sanitized.bypassSecurityTrustHtml(text)
}
and in the html you should implement this html code :
<p> <span [innerHTML]="bypassSecurityTrustHtml(myForm.value.pageContent)"></span></p>
enter code here
As you can see at following picture, tooltip is to narrow, it should be wider, because I want to be able to see all data of database. Any ideas how to extend tooltip?
Here is code of tooltip
[
'attribute' => $dummy,
'label' => Yii::t('app', 'Charakterisierung'),
'format' => 'raw',
'value' => function($model) {
if (!empty($model->person->personentypDominant->typ_name)) {
$tag = Html::tag('span', 'Tooltip-Touch Me!', [
// html-tags will be rendered in title using jquery
'title' => $model->person->personentypDominant->typ_empfehlung,
'data-placement' => 'left',
'data-toggle' => 'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
]);
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],
You can always add a css class to override the max-width property set on the .tooltip-inner class which shows your content as tooltip it is set to default at 200px;
for example, consider the below HTML with ul li, as the tooltip content
<ul>
<li>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
</ul>
add the following css classes to the view
$css = <<<CSS
.tooltip-inner ul{
list-style-type:none;
padding:0;
margin:0;
width:100%;
}
.tooltip-inner{
max-width:700px !important;
}
CSS;
$this->registerCss($css);
this will show you the tooltip like below
I have a JSON with one key with multiline value.
IĀ“m trying that pug render this in multiline with breaklines, but it shows it in a line.
https://codepen.io/anon/pen/mXjZZR
<pre>
-
var example = [
{
"company": "Orange Software",
"website": "example.com",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"services": [
"Customer experience",
"Digital strategy",
"Velocity development"
]
}
];
body
for i in example
h1 #{i.company}
p #{i.services}
</pre>
Currently all items in the services array is appended into the <p> paragraph tag, thus it is displayed in a single line.
<h1>Orange Software</h1>
<p>Customer experience,Digital strategy,Velocity development</p>
To show it in different lines, you should iterate the services array as well, and add individual array items to separate <p> paragraph elements.
for i in example
h1 #{i.company}
for j in i.services
p #{j}
Which renders to,
<h1>Orange Software</h1>
<p>Customer experience</p>
<p>Digital strategy</p>
<p>Velocity development</p>
Please let me know whether this helps.
HI, I am using Angular 2 for frontend with wordpress rest api backend.
I am getting a json response from service. But Wp rest api send the content along with HTML tags and images. I am unabale split it and use it in my HTML.
I want use image and text should be at different places. also I need to remove tag from the content.
service Like:
#Injectable()
export class VtkraHomeService {
private url = 'http://myapplication.com/wp-json/wp/v2/posts';
private headers = new Headers({'Content-Type': 'application/json'});
constructor (private http : Http){
}
getFeeds(){
return this.http
.get(this.url)
//.then( (res) => res.json);
.map((res: Response) => res.json());
}
and ComponentLike:
export class HomeComponent implements OnInit {
homefeed: any;
showLoader = false;
constructor( private VtkraHomeService: VtkraHomeService ) { }
getHomeFeeds(){
this.showLoader = true;
this.VtkraHomeService
.getFeeds()
.subscribe(data => {
this.homefeed = data;
console.log(this.homefeed);
this.showLoader = false;
});
}
ngOnInit(){
this.getHomeFeeds()
}
}
I am getting a Json response something like this:
[
{
id: 15953,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
},
{
id: 15954,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
},
{
id: 15955,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
}
];
I wanted to get html and text separate from "content (rendered)"
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
My Html code should be like:
<md-list class="home-feed-list">
<div *ngFor="let item of homefeed">
<md-list-item routerLink="/Story">
<img md-list-avatar src="item.content.rendered(image url)" alt="" class="list-avatar">
<h4>{{item.title.rendered}}</h4>
<p>{{item.content.rendered(remaining text)}}</p>
</md-list-item>
<md-divider></md-divider>
</div>
</md-list>
Please help me to get it proper: I am beginner in angular2 and Typescript
You can use the DOM API to create an object and retrieve the bits and pieces from the rendered string. You can do it in your view-model, after you receive the data from service, and construct your model accordingly in the view-model (i.e. construct homefeed containing objects having this image and text property).
A simple example is shown below.
var contentRendered = '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>'
// create a DOM object from the rendered text
var template = document.createElement("template");
template.innerHTML = contentRendered;
// use DOM API to retrieve the data you need from the object
var imgPart = template.content.firstChild.querySelector("img");
var text = template.content.firstChild.innerText;
console.log(imgPart);
console.log(text);
Alternatively, you can put this logic in custom AngularJS filter(s), and tweak the rendering accordingly. Though, I am not an AngularJS user, but from this link it seems that such things can be used for this purpose.
Hope this helps.