I am working on a Laravel-4 application and I am using javascript templates to render items on a particular page. Below is my template for my slideshow items
<script type="t/template" id="bookItem">
<div class="resource-wrap" data-resource="#{{=type}}">
<div class="resource #{{=type}}">
#{{id}}
<div class="image">
#foreach($slideshow->find($slideshow->id)->slides()->take(1)->get() as $slide)
<img width="100%" height="100%" src="/img/slideshows/{{$slide->link}}"/>
#endforeach
</div>
#{{/id}}
<ul class="info">
<li class="title">#{{=id}}#{{=title}}#{{=name}}</li>
<li>#{{=desc}}</li>
</ul>
<a class="ov open-#{{=type}}" href="#"></a>
</div>
</div>
</script>
It is rendering alright on the page and everything is working correctly except for one thing. This line:
#foreach($slideshow->find($slideshow->id)->slides()->take(1)->get() as $slide)
I am trying to pass in the id of the current item but cannot seem to do so. I can here:
<li class="title">#{{=id}}#{{=title}}#{{=name}}</li>
But when I use #{{=id}} in my loop I get an error. I am wondering how I can print this variable out in the loop?
I tend to try to avoid querying in the view and query within the controller, passing the collection to the view - makes it cleaner in the view. Keep the view separate as much as possible
So assuming you have passed a variable $slideshow which is your collection you can then do:
<div class="image">
#foreach($slideshow AS $slide)
<img width="100%" height="100%" src="/img/slideshows/{{$slide->link}}"/>
#endforeach
</div>
I'm not clear what value $id relates to in your question. Is that the id of the slide? if it is then as long as it's contained in the loop you can get that by $slide->id
If assumption is wrong can you confirm what id relates to
Related
I have a problem inside a v-for, inside this v-for I create several images, which have their src pointing to an object saved in a reactive array.This array is obtained from a fetch that returns this type of objects:
{
categoria:"Web"
data:"2018-02-20 00:00:00"
idgaleria:"1"
titol:"Web technologies"
url:"http://www.laqshya.in/images/web1.png"
}
And this is the v-for inside the template:
<div v-for="entrada in entrades">
<div class="caption">
<img src="{{entrada.url}}" alt="" class="pic"/>
</div>
<h4>{{entrada.titol}}</h4>
<p>Publicat el {{entrada.data}}</p>
</div>
The result is that the template is rendered without any problem, but the images are not visible, If I look at the browser element inspector, I can see that the image element is rendered as follows
<img src="'{{entrada.url}}'" alt="" class="pic">
Does anyone know how to refer to the reactive variable within the src attribute of an image?
I have been searching the internet for the same problem, and I have seen that it happens to more people, but all refer to images that are stored locally and not on the Internet, as is my case.
Thank you!
Try
<img :src="entrada.url" alt="" class="pic"/>
or
<img v-bind:src="entrada.url" alt="" class="pic"/>
They are the same, one being the shorthand syntax. Without it, the contents in the quotes will be interpreted as a string, not code.
I have an odd issue that is driving me crazy
I basically have a list of article of different type: news, tweets and video
I am rendering them like this:
<div ng-repeat="item in items | orderBy:-timestamp track by item.id" ng-switch="item.type">
<?php
include("templates/ang-youtube.html");
include("templates/ang-tweet.html");
include("templates/ang-news.html");
?>
</div>
Inside each include i am doing something like this:
<div class="item" masonry-brick ng-switch-when="news">
...content in here
</div>
or
<div class="item" masonry-brick ng-switch-when="tweet">
...content in here
</div>
or
<div class="item" masonry-brick ng-switch-when="youtube">
...content in here
</div>
Now the problem is the youtube items are always rendered first. The order of the items (timestamp) is ignored. The tweets and news items though render correctly.
If i remove the switch and just list out the items as text then everything is in the correct order. As soon as I add the switch the youtube items are rendered first again.
Any ideas what I am doing wrong?
I have tried moving the switch inside the ng-repeater like so:
<div ng-repeat="item in items | orderBy:-timestamp track by item.id">
<div ng-switch="item.type">
<?php
include("templates/ang-youtube.html");
include("templates/ang-tweet.html");
include("templates/ang-news.html");
?>
</div>
</div>
But it makes no difference. The youtube items are always rendered first.
If i inspect the $scope.items array they are ordered correctly by timestamp.
I have also tried using an ng-if instead of a switch but get the same outcome
Any ideas? :-(
Also tried using ng-include like this:
<div ng-include="'templates/ang-{{item.type}}.html'"></div>
But that doesn't work
DOH!!! Needed to add the preserve order attribute as outlined here
https://github.com/passy/angular-masonry
I'm repeating elements from a big javascript object literal. Currently, I display the tabbed navigation, image, and title for each product correctly. I cannot get the info to display correctly however. I have the following code:
<div ng-repeat="section in tab.sections" class="product">
<div ng-repeat="child in section.children" ng-if="productIsActive(child, $index)">
<div class="additionalProductInfo">
<nav class="secondaryTabbedNavigation">
<ul>
<li class="active" ng-repeat="pTabs in child.productTabs">
<a class="activelink" href="#">{{pTabs.title}}</a> //title of each tab
</li>
</ul>
</nav>
</div>
<div class="productImage">
<img ng-src="{{ child.productImageURL }}"/> //the product image
</div>
<div class="productInfo">
<h2 class="productTitle">{{ child.title}}</h2> //the product title
<div ng-repeat="info in pTabs.infoData" class="productDescription">
<p>
{{info[1]}} //product info goes here.
</p>
</div>
</div>
</div>
</div>
I also tried "{{info}}" , "{{info[i][i]}}", and a couple things using $index. But when "{{info}}" didn't display anything, I figured I was retrieving the data incorrectly.
Here is the "tabs" javascript object that all this info comes from:
As you can see the product info is in a two dimensional array (the first array with the labels of what the information is (e.g. "Title", "Link") and the corresponding information is in the second array. I know this may not be ideal, but this information is currently grabbed from .csv files that prone to changing
and I cannot change how they come into this javascript object.
I know this may seem overcomplicated but this is about as deep as I need to go to get data from the large javascript object and I'm very close.
How can I get the contents from the second array in the two dimensional array (infoData[1]) to display like I did with the tabs, image, and title.
Thank you very much for your time!
I'm trying to repeat an array of objects and an array of images. I would like each one image to be repeated with each object. My problem is if I nest the ng-repeat inside another ng-repeat, it repeats all the images every time. My code is below. I hope this makes sense. Thanks.
<div class="feed-content">
<div ng-repeat="feed in feeds | filter:filterText" class="article animate-repeat">
<h3>{{feed.title}}</h3>
{{feed.content | limitTo:100}}<br/><span class="read-more">Read More</span>
</div>
<div ng-repeat="img in imgs" class="article-image" style="background-image: url('{{img}}');"></div>
</div>
It's because your second loop is outside the parent loop, also you might want to use imgs field from each feed object in the parent loop, so you're probably need something like ng-repeat="img in feed.imgs"
All in all you're looking for something like this structure
<div ng-repeat="feed in feeds">
<h3>{{feed.title}}</h3>...
<div ng-repeat="img in feed.imgs">...</div>
</div>
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.