API :
"data": [
{
"accrediationsId": 1,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548558/in/photostream/\" title=\"1\">
<img src=\"https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg\" width=\"266\" height=\"79\" alt=\"1\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
{
"accrediationsId": 2,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548508/in/photostream/\" title=\"2\">
<img src=\"https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg\" width=\"266\" height=\"79\" alt=\"2\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
HTML CODE :
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
{{Affiliation.imageURL}}
</div>
Need to show Images from flikr in html page by using angular js. Is that possible to get image path directly from flikr api and show in ng-repeat.
Use image element with ng-src
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
<img ng-src="{{Affiliation.imageURL}}">
</div>
DEMO
var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.getAffiliationData = [
{
"accrediationsId": 1,
"imageURL": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg"
},
{
"accrediationsId": 2,
"imageURL": "https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="Affiliation in
getAffiliationData" ng-click="setClickedRow(user)">
<img ng-src="{{Affiliation.imageURL}}">
</div>
</body>
Double braces are not used for binding html content, they are used for rendering text, to render html you can use this "ng-bind-html"
Try this:
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
<div ng-bind-html="Affiliation.imageURL"></div>
</div>
you will need to inject this module
here is the demo link
Related
I have created an artist(artists.html) page, which includes around 15 artists. Now I am trying to create the profile of each artist through one single HTML file dynamically. So I have created another HTML file(single-artist.html) which will show the profile of an artist clicked by the visitor.
artists.html (Out of 15 artists, below are the two examples)
<div class="all-artist" id="artists">
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="0">
<div>
<a href="artist-single.html">
<img src="img/1.jpg" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="1">
<div>
<a href="artist-single.html">
<img src="img/2.jpg" alt="">
</a>
</div>
</div>
</div>
artist-single.html
<div id="name"></div>
<div id="logo"></div>
<div id="bio"></div>
data.json
[{
"name": "Arsh",
"logo": "img/logo.jpg",
"bio": "Arsh is a singer/songwriter"
},
{
"name": "Benz",
"logo": "img/logo.jpg",
"bio": "Benz is a singer"
}]
main.js
$('#all_artists artist-single').on('click',function(){
window.location.href="artist-single.html";
var num = $(this).data('number');
$.getJSON('data.json',function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
});
Now, when I click on an artist image, it redirects to artist-single.html but it's not fetching values. Maybe because I am redirecting and fetching the values on the same event. Help would be really appreciated.
$(document).ready(function() {
var num = $.cookie('num');
$.getJSON('data.json', function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
$('#artists .artist-single').on('click', function() {
var num = $(this).data('number');
$.cookie('num', num);
window.location.href = "artist-single.html";
});
});
I have an object with array of data in {}, I want to print name attribute of all params.
The object is:
[
{
"name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Estafanie",
"value": 14000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Paul",
"value": 20000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}
]
I want to see in my html:
Chris, Estefanie, Paul
I try with:
{{# _.each(name, function(listname){ }}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
<h5>{{{ listname }}}</h5>
</div>
</div>
{{# }) }}
But not working ;/ I find in mustache documentation but I don't see nothing same.
Anybody can help me with this?.
Thanks
Your view doesn't look like a MustacheJS view. Amend it to look like the following. Substitute "ObjectLiteralName" for the name of your object literal variable name.
Using {{#}}{{/}} in a Mustache view denotes that you wish to loop over an object.
See MustacheJS. It contains all the information you need to get up and running with Mustache.
View
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
{{#ObjectLiteralName}}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
{{name}}
</div>
</div>
{{/ObjectLiteralName}}
</script>
Javascript
function renderTemplate() {
var $template = $('#template').html();
Mustache.parse($template); // optional, speeds up future uses
var rendered = Mustache.render($template, ObjectLiteralName);
$('#target').html(rendered);
}
Result
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Chris
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Estefanie
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Paul
</div>
</div>
I have made a small app using AngularJS 1.4, that outputs JSON data from a remote source.
Here is the JSON data in question.
Here is my view - the link to ngInfiniteScroll comes in at the top of the container:
<body ng-app="cn" ng-controller="MainCtrl as main">
<div id="header" class="container-fluid">
<p>Camper News</p>
</div>
<div class="container">
<div infinite-scroll="feed.loadMore()" infinite-scroll-distance="3">
<div ng-repeat="newsItem in myData" class="news-row col-sm-12 col-xs-12">
<div class="col-sm-2 col-xs-12">
<div id="img-container">
<img ng-src={{newsItem.author.picture}} id="user-avatar" />
</div>
</div>
<div class="news-text col-sm-10 col-xs-12">
<a href={{newsItem.link}}><em>{{newsItem.headline}}</em></a>
</div>
<div class="col-sm-10 col-xs-12" id="link-description">
{{newsItem.metaDescription}}
</div>
<div class="col-sm-12 col-xs-12" id="bottom-text">
<div class="col-sm-4 col-xs-12" id="author">
<a href='http://www.freecodecamp.com/{{newsItem.author.username}}'>{{newsItem.author.username}}</a>
</div>
<div class="col-sm-4 col-xs-12" id="likes">
<i class="fa fa-thumbs-o-up"></i> {{newsItem.upVotes.length}}
</div>
<div class="col-sm-4 col-xs-12" id="timestamp">
<span am-time-ago={{newsItem.timePosted}} | amFromUnix></span>
</div>
</div>
</div>
</div>
</div>
</body>
I am attempting to stagger the loading and outputting of the data using ngInfiniteScroll. I'm just not sure how it would work:
app.controller('MainCtrl', function($scope, Feed) {
$scope.feed = new Feed();
});
app.factory('Feed', function($http) {
var Feed = function() {
this.items = [];
this.after = '';
};
Feed.prototype.loadMore = function() {
var url = "http://www.freecodecamp.com/news/hot";
$http.get(url).success(function(data) {
var items = data;
// Insert code to append to the view, as the user scrolls
}.bind(this));
};
return Feed;
});
Here is a link to the program on Codepen. The code that relates to ngInfiniteScroll (controller and factory) is currently commented out in favour of a working version, but this of course loads all links at once.
What do I need to insert in my factory in order to make the JSON load gradually?
From what I can tell, by looking at FreeCodeCamps' story routes, there is no way to query for specific ranges of the "hot news" stories.
It looks to just return json with a fixed 100 story limit.
function hotJSON(req, res, next) {
var query = {
order: 'timePosted DESC',
limit: 1000
};
findStory(query).subscribe(
function(stories) {
var sliceVal = stories.length >= 100 ? 100 : stories.length;
var data = stories.sort(sortByRank).slice(0, sliceVal);
res.json(data);
},
next
);
}
You can use infinite scroll for the stories it does return to display the local data you retrieve from the request in chunks as you scroll.
I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \
1) When a user clicks an anchor inside div with class='thumbs'
2) I want to automatically update ViewModel's IMAGE_PATH and IMAGE_DESCRIPTION
3) based on clicked thumb THUMB_PATH and THUMB_DESCRIPTION accordingly and update the UI inside div class='containt'
Short Version: I want Containt div always reflect the clicked thumb details.
Can someone please help me or suggest me resources on how to achieve that while using Knockout's Mapping Plugin?
Thanks in advance!
var data= {
"ImagesInfo": [
{
"IMAGE_PATH": "",
"IMAGE_DESCRIPTION": "",
"thumbs": [
{
"thumb_id": "1",
"THUMB_PATH": "url(http://..183.jpg)",
"THUMB_DESCRIPTION":"here is a car",
"type": "sponsor"
},
{
"thumb_id": "2",
"THUMB_PATH": "url(http://..184.jpg)",
"THUMB_DESCRIPTION":"here is a boat",
"type": "img"
},
{
"thumb_id": "3",
"THUMB_PATH": "url(http://..185.jpg)",
"THUMB_DESCRIPTION":"here is a plane",
"type": "video"
}
]
}
]
}
<div id="Images">
<div data-bind="foreach: ViewModelB">
<div class="containt" style="margin-top: 10px;">
<div data-bind="style: { backgroundImage: IMAGE_PATH }"></div>
<div data-bind="html: IMAGE_DESCRIPTION"></div>
<div style="clear: both;"></div>
</div>
<div class="thumbs" style="margin-top: 10px; margin-left: 4px">
<div data-bind="foreach: thumbs">
<a class="thumb" data-bind="style: { backgroundImage: THUMB_PATH }, attr: { id: thumb_id }"></a>
</div>
</div>
</div>
<script>
var ViewModelB = ko.mapping.fromJS(data);
ko.applyBindings(ViewModelB, document.getElementById("Images"))
</script>