I have n number of records coming from backend as HTML in array. I need to display the HTML response as HTML in my view. I tried ng-bind-html , but it takes the last value. Need assistance.
$scope.res= "data": [
{
"jd": "<p>this jd1</p>"
},
{
"jd": "<li>this jd2</li>"
},
{
"jd": "<ul>this jd3</ul>"
},
{
"jd": "<p>this jd4</p>"
}
]
}
Html:
<div ng-repeat="item in res">
<div ng-bind-html ="item.jd">
</div>
You can use $sce.trustAsHtml. See the documentation here.
What you could do is:
Add this line in your controller:
$scope.trustAsHtml = $sce.trustAsHtml;
And update your HTML like this:
<div ng-bind-html ="trustAsHtml(item.jd)">
Note that you should probably start using Angular 6 instead of AngularJS
Related
Where am i going wrong?
I want to access images from datahl.json file on the web page but unable to access them.Please check the codes and help me.
If possible please refer the solution to plunker editor.
index.html
<div class="col-sm-4" ng-repeat = "hbl in hbls">
<div class="thumbnail" ng-repeat = "h in hbl.data_list"
style="width:100%;">
<img ng-src="{{h.img}}" alt="" style="height:50vh;">
<div class="caption">
<p><strong>{{h.name}}</strong></p>
</div>
</div>
</div>
app.js This is my js codes
var app = angular.module('hostellApp', []);
app.controller('hostellController', function($scope, hblsFactory){
$scope.hbls;
hblsFactory.getHbls().then(function(response){
$scope.hbls = response.data;
});
$scope.sayHello = function(){
console.log("Hello");
}
});
app.factory('hblsFactory', function($http){
function getHbls(){
return $http.get('datahl.json');
}
return {
getHbls: getHbls
}
});
datahl.json This is my local JSON file
`
{
"view_type": 5,
"title": "Hostels By Locality",
"position": 5,
"data_list":
[
{
"img": "https://s3.us-east-2.amazonaws.com/images-city-
teens/IMG_20180526_1139570.8091572935412125.jpg",
"name": "Mahavir Nagar"
},
{
"img": "https://graph.facebook.com/1666751513414902/picture?
type=large",
"name": null
},
{
"img": "https://s3.us-east-2.amazonaws.com/images-city-
teens/cropped1148015742983667713.jpg",
"name": "New Rajiv Gandhi"
},
{
"img": "https://s3.us-east-2.amazonaws.com/images-city-
teens/cropped998427941.jpg",
"name": "Jawahar Nagar"
}
]
}`
The data you get from your JSON file is not an array but an object. This means that you only need one ng-repeat.
Change your first ng-repeat to ng-repeat="h in hbls.data_list"(added an 's' to hbl) and delete your second ng-repeat.
Working plunker: https://plnkr.co/edit/OOd1M1dNFjSB7uaqZZB6?p=preview
I'm attempting to iterate through data in a json file using Angular 1. One of the pieces of data contains HTML fieldsets and tabular data. Angular is stripping this out. How can I prevent this?
This is the code I am using for the app:
var app = angular.module( 'myApp', ['ngSanitize'] );
app.controller('crisisCtrl', function($scope, $http) {
$http.get("data.php").then(function(response) {
$scope.mkyData = response.data.records;
});
});
Json file (data.php):
{
"records": [
{
"Card": "3",
"Title": "Blah",
"Content": "<fieldset class=\"table bt-0\"><thead><tr><th>Name</th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill</td><td> Director</td><td>304 304-3042</td></tr><tr><td>Mary</td><td>Technical</td><td>304 304-3042</td></tr><tr><td>Hannah</td><td>Engineer</td><td>120 104-4042</td></tr></tbody></fielset>"
}
]
}
And within my html file:
<div class="container" ng-app="myApp" ng-controller="crisisCtrl">
<div class="card" ng-repeat="x in myData">
<div class="card-block" ng-bind-html="x.Content"></div>
</div>
</div>
Here's an adjusted fiddle:
http://jsfiddle.net/deCcG/2/
thead and tbody should be used in table. Your browser may accept it, but Angular does not.
Try to just update your $scope.page.content with:
"content":"<fieldset class=\"table bt-0\"><table><thead><tr><th>Name</th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill Williams</td><td>Widget Director</td><td>+1 304 304-3042</td></tr><tr><td>Mary Barnhill</td><td>Technical</td><td>+44 304 304-3042</td></tr><tr><td>Hannah Kwak</td><td>Engineer</td><td>+44 120 104-4042</td></tr></tbody></table></fieldset>"
Working Fiddle here.
Furthermore, you miss-spelled the closing </fieldset>.
The <fieldset class=\"table bt-0\"> is what is causing the issue, if you add a table element angular will then be able read the HTML being correctly formatted with correct elements and displays correctly
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope) {
$scope.page = {
"title": "Getting Started",
"content": "<fieldset class=\"table bt-0\"><table><thead><tr><th>Name </th><th>Role</th><th>Number</th></tr></thead><tbody><tr><td>Bill Williams</td><td>Widget Director</td><td>+1 304 304-3042</td></tr><tr><td>Mary Barnhill</td><td>Technical</td><td>+44 304 304-3042</td></tr><tr><td>Hannah Kwak</td><td>Engineer</td><td>+44 120 104-4042</td></tr></tbody></table></fieldset>"
}
})
How to fetch URL stored in json file using angularjs?
JSON File
"Media": [
{
"title": "Example_1",
"url": "http://www.example.com/example.jpg"
},
{
"title": "Example_2",
"url": "http://www.w3schools.com/html/mov_bbb.mp4"
}
]
I want to use the 'url' in <img>, <video> tags!
In HTML,
I tried
<img src="{{media.url}}"></img>
But nothing happens? Am I missing something?
Have you tried using ng-src?
<img ng-src="{{image.url}}"></img>
For videos there are many work arounds but here is one example.
Inject the $sce provider into your controller and use the $sce.trustAsResourceUrl method to set the videoUrl.
function MyControl($scope, $sce) {
var videoUrl = 'http://www.w3schools.com/html/mov_bbb.mp4';
$scope.videoUrl = $sce.trustAsResourceUrl(videoUrl);
}
Then in your view
<video ng-src="{{videoUrl}}" controls></video>
Another work around is creating a filter
filter("trustUrl", ['$sce', function($sce) {
return function(videoUrl) {
return $sce.trustAsResourceUrl(videoUrl);
};
}]);
And then in your view
<video src="{{Your_URL | trustUrl}}" controls></video>
I'm just getting started with Angular, so I'm really not sure how to solve this problem.
I'm importing a list of private messages (from Mongo) in which there is a subobject of recipients in the following format:
"recipients": [{
"userID": 1,
"username": "User1",
"read": false
},
{
"userID": 2,
"username": "User2",
"read": false
}]
I want to format them into user links: User1, User2
I wasn't sure how to do this straight in the view, so I thought to add it to the controller in the $http function as:
var recipientList = new Array();
value.recipients.forEach(function(value, key) {
recipientList.push("" + value.username + "");
});
data[key].recipients = recipientList.join(', ');
But when I display it {{pm.recipients}}, it shows up as a string instead of HTML.
I've been thinking of wrapping it in a span, then using ng-repeat in an a tag, but I'm not sure how to get it to display commas between them, but not in the last.
Advice? Should this be on the view logic or controller logic?
You should never need to write any kind of markup in within your controller. Directives are for DOM manipulation. In this case, you just need to use some databinding and built in directives:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.recipients = [{
"userID": 1,
"username": "User1",
"read": false
},
{
"userID": 2,
"username": "User2",
"read": false
}];
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<a ng-repeat="user in recipients" ng-href="/user/{{user.userID}}/">
{{user.username}}{{!$last ? ',' : ''}}
</a>
</div>
ng-repeat loops over the array of recipients, creating markup for each of them.
ng-href just delays the application of the href attribute until the data is available, which is a better than it would do with just databinding right in the href tag.
For the comma, you just need to use the $last variable provided in ng-repeat. You could do this a few ways. I like {{!$last ? ',' : ''}} which is just ternary for "if not the last item, bind a comma, otherwise, bind nothing."
The reason your markup appeared as a string is because databinding will only display everything as a string. To bind a string as HTML, you have to use the ng-bind-html directive. However, Angular doesn't trust HTML by default and will not bind it unless you use the $sce service to specifically allow it. It's a bit of a task, but like I said, you don't need that here anyway.
Reply to your comment, to take the comma out of the anchor:
<div ng-repeat="user in recipients">
<a ng-href="/user/{{user.userID}}/">{{user.username}}</a>
<span ng-if="!$last">,</span>
</div>
I am struggling to pull the data from the 3rd loop (Names) in the array below.
Any idea what i am doing wrong?
sample.json
{
"otc": [
{
"name": "Tums",
"language": [
{
"title": "English",
"names": [
{"name": "Tums"},
{"name": "Pepto"}
]
},
{
"title": "China"
},
{
"title": "Germany"
}
,
{
"title": "Mexico"
}
,
{
"title": "India"
}
,
{
"title": "United Kingdom"
}
]
},
{
"name": "Dramamine",
"language": [
{
"title": "title2album1"
},
{
"title": "title2album2"
},
{
"title": "title2album3"
}
]
}
]
}
And this is my index.html
<body ng-app="list">
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat-start="meds in otc">
<strong> {{meds.name}}</strong> //This displays just fine
</li>
<li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine
<li ng-repeat-end ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display
</ul>
</div>
<script>
angular.module('list', []);
function ListCtrl($scope, $http) {
$http({method: 'GET', url: 'sample.json'}).success(function(data) {
$scope.otc = [];
angular.forEach(data.otc, function(value, key) {
$scope.otc.push(value);
});
$scope.isVisible = function(name){
return true;
};
});
}
</script>
It looks like your JSON data is a bit incomplete, since you're missing the names key in all of the language objects except for the English one.
Beyond that, your html/angular-view code is a bit off. The ng-repeat's should be nested inside of one-another. This is done by having the opening/closing html tags that contain the ng-repeat directive completely surround the inner <li> tags.
It's a bit hard to tell, but if you want nested lists, you need to add <ul> tags like in my example below.
I believe your index html should look something like:
<ul>
<li ng-repeat="meds in otc">
<strong> {{meds.name}}</strong> //This displays just fine
<ul>
<li ng-repeat="lang in meds.language">
<em>{{lang.title}}</em>
<ul>
<li ng-repeat="drugs in lang.names">{{drugs.name}}</li>
</ul>
</li>
</ul>
</li>
</ul>
The reason why the li ng-repeat tags should be nested is because ng-repeat creates its own isolate scope. Which means that inside of an ng-repeat tag, it only has access to the data made available by the ng-repeat="data in datar" part.
So having:
<li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine
<li ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display
as sibling elements, and not the second as a child of the other, the 2nd ng-repeat list does not know what the var lang is. So the drugs in lang.names fails.
Btw, this snippet assumes that the output you want is:
Tums
English
Tums
Pepto
China
Germany
etc
Dramamine
title2album1
title2album2
etc
If you wanted the output as a flat list, you can use the following CSS
ul ul {
padding: 0;
margin: 0;
list-style-type: disc;
}