I'm trying to convert a string which contains an expression passed through an attribute, inside the own directive's template. The idea is to do something like this:
<div custom-directive images-source="'staticpath/blah/blah/{{Item.Src}}'"></div>
And, then inside the template, I would have a ngRepeat directive that would iterate thorugh a data set like this:
<ul>
<li ng-repeat="Item in Items">
<img ng-src="{{imagesSource}}{{Item.name}}.{{Item.extension}}" />
</li>
</ul>
The expected result should be something like this:
<ul>
<li ng-repeat="Item in Items">
<img ng-src="staticpath/blah/blah/src1/file1.jpg" />
<img ng-src="staticpath/blah/blah/src2/file2.jpg" />
<img ng-src="staticpath/blah/blah/src3/file3.jpg" />
<img ng-src="staticpath/blah/blah/src4/file4.jpg" />
</li>
</ul>
I tried to invoke $interpolate and $compile directly in my template but I get an empty string.
{{$interpolate(imagesSource)}} and {{$compile(imagesSource)}}
Any ideas?
EDIT:
Imagine the next scenario. We have a directive that will show a list of image galleries. Each image gallery will have: a title, a little description and from 1 to n images.
Ok, let's say we have a constant with the root to the images folder '/media/images/galleries/'. Then, inside the template, when on the ngRepeat loop, I will need to build the path using that constant and one of the properties (in this case we can name it 'subfolder'), but I don't want the own directive to decide which property is needed. (that's why I'd like to pass the expression in the attribute).
The directive:
<div image-galeries images-source="'staticpath/blah/blah/{{Gallery.subfolder}}'">
The template:
<div ng-repeat="Gallery in Galleries">
<h3>{{Gallery.title}}</h3>
<p>{{Gallery.description}}</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="{{imagesSource}}{{Image.name}}.{{Image.extension}}" />
</li>
</ul>
</div>
And the result:
<div ng-repeat="Gallery in Galleries">
<h3>Gallery 1</h3>
<p>Gallery description 1</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="staticpath/blah/blah/src1/file1.jpg" />
<img ng-src="staticpath/blah/blah/src1/file2.jpg" />
<img ng-src="staticpath/blah/blah/src1/file3.jpg" />
<img ng-src="staticpath/blah/blah/src1/file4.jpg" />
</li>
</ul>
</div>
<div ng-repeat="Gallery in Galleries">
<h3>Gallery 2</h3>
<p>Gallery description 2</p>
<ul>
<li ng-repeat="Image in Gallery.Images">
<img ng-src="staticpath/blah/blah/src2/file1.jpg" />
<img ng-src="staticpath/blah/blah/src2/file2.jpg" />
</li>
</ul>
</div>
Excuse me please, about my english, I hope it was clear enough :D
Related
<div className="col-lg-3 col-md-3">
<li>
<img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" />
</li>
</div>
In my project I am importing an image and on the onclick I want the image to take them to a URL. How can I get this done?
You can use a tag:
<li><a href='https://arizonaatwork.com'><img src='https://i.imgur.com/fe0T4nw.png'/></a></li>
Working example:
You need to add "a" tag before image
<div className="col-lg-3 col-md-3">
<li>
<img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" />
</li>
I struggle with very basic Angular stuff.
And I don't know exactly, what to search for.
Like this one:
<div ng-repeat="i in [1,2,3]">
{{i}}
</div>
<hr/>
The output is (as expected): <div>1</div>...<div>3</div><hr/>
What I actually want is: <div>1</div><hr/> <div>2</div><hr/> <div>3</div> (no hr after 3)
So like: 1 | 2 | 3
How can I do that?
Please note: No hr after the last div.
Please note: I cannot put the hr-tag into the div.
You just have to create a parent div wrapping the div and hr and also to hide the last hr, use a comparison check with $last
<div ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</div>
As #Vivz answered you can just wrap it in a parent div. If for some reason you cannot however, you can use the ng-repeat-start and ng-repeat-end directive:
<div ng-repeat-start="i in [1,2,3]">
{{i}}
</div>
<hr ng-repeat-end ng-if="!$last" />
You can put your ng-repeat at a level higher. For example:
<span ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr/>
</span>
The result will be:
<span>
<div>1</div>
<hr/>
</span>
<span>
<div>2</div>
<hr/>
</span>
<span>
<div>3</div>
<hr/>
</span>
Note: I used a span for the parenet, but you can use another HTML element, such as a div.
nr-repeat is directive in angular which can can used with html element or itself as a tag
<ng-repeat ng-repeat="i in [1,2,3]">
<div>{{i}}</div>
<hr ng-if="!$last" />
</ng-repeat>
I'm trying to implement carousel by using angular-carousel plugin and nothing works, just empty screen.
This is my html code:
<body ng-app="carouselApp">
<div ng-controller="carouselController">
<ul rn-carousel>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/1860644/294403301/stock-photo-soup-vegetable-soup-bowl-294403301.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/511399/210391630/stock-photo-grilled-chicken-breast-with-fresh-vegetables-selective-focus-210391630.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/522076/266014253/stock-photo-fried-fish-fillet-atlantic-cod-with-rosemary-in-pan-266014253.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/502972/264191042/stock-photo-bowl-of-healthy-fresh-fruit-salad-on-wooden-background-top-view-264191042.jpg">
</li>
<li>
<img alt="" src="http://image.shutterstock.com/display_pic_with_logo/356269/162416498/stock-photo-closeup-of-fried-rosemary-potato-wedges-in-a-rustic-setting-162416498.jpg">
</li>
</ul>
</div>
</body>
Application and controller code:
var app = angular.module('carouselApp',['angular-carousel']);
app.controller('carouselController', function($scope) {
});
jsFiddle example: https://jsfiddle.net/anatoly314/n0qfj4dk/6/
plunker example: http://plnkr.co/edit/ERDtcVNdKSVTcqtH2XOT?p=info
I'm using angularjs 1.4.5 and angular-carousel 0.3.13, what am I doing wrong?
it's something wrong with your styles, if you add an 'id' to :
<ul rn-carousel id="theCarousel">
and in you css:
#theCarousel{
height:400px;
}
your carousel will work!
I will recommend you to use carousel from this page, never have any problem with it.
How can i pass the Url.action with parameter from angular object?
refer to new { id ="{{item.Title}}", title = "" } section in code below.
i cant do it like id ={{item.Title}} this renders it as an string.
<div ng-app class="container-fluid">
<div class="row-fluid">
<div ng-controller="MostViewedToolController" class="span2">
<ul class="nav nav-list">
<li><h4><b>Most Viewed</b></h4></li>
<li ng-repeat="item in tools">
{{item.Title}}
</li>
</ul>
</div>
#RenderBody()
</div>
</div>
Please follow the below process, i have implemented it and it's working fine.
< a ng-href="#Url.Action("Index","home")?id={{item.ID}}&title={{item.Title}}"> link_name < / a>
This fixed it.
<a ng-href="#Url.Action("Index", "home"){{item.ID}}/{{item.Title}}"> {{item.Title}}</a>
In my Backbone App I am rendering a View where it loads data from my database. If there is no data, I want it to display a message like "There's no data". I used the #unless-method but my issue is, that this message gets displayed while the data gets loaded/rendered and then it disappears when the data is ready and gets displayed. My Handlebars Template looks like this:
{{#each this}}
<div>
<div>
<article>
{{#if cover_image}}
<img src="{{cover_image}}">
{{else}}
<img src="noimage.jpg" />
{{/if}}
</article>
</div>
<div>
<h2>{{album_title}}</h2>
<h4>
{{#if physicalReleaseDate}}
<time datetime="2014-01-10">({{physicalReleaseDate}})</time>
{{else}}
<time datetime="2014-01-10">({{digitalReleaseDate}})</time>
{{/if}}
</h4>
</div>
<div>
<div>
<ol>
{{#each tracks}}
<li>{{track_title}}<span>{{track_duration}}</span></li>
{{/each}}
</ol>
</div>
</div>
</div>
{{/each}}
{{#unless this}}
<div class="noAlbums">
<h2>There's no data</h2>
</div>
{{/unless}}
Does anyone know how to avoid this?
Thanks in advance...
You need an inverted section
Example from docs:
Model:
{
"repos": []
}
Template:
{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}