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 am trying to compare the previous element in a ng-repeat that is ordered to the current one. If the two appointments have the same DateString I don't want it to print out. You can see I try to prevent that in the ng-if.
<div ng-repeat="appointment in appointments | orderBy: 'milliSeconds' " ng-if="!noAppointments">
<div class="row row-date" ng-if="appointments[$index - 1].DateString != appointment.DateString">
<div class="col">
{{appointment.DateString}}
</div>
</div>
</div>
This does not work though. Do you guys have any suggestions on how this could be done?
I sorted the array in the controller and moved the logic there too to solve this.
My channel.json has 7 objects of information which get iterated in hb, I want to push a date in between them. In other words how can I push an html tag to display after the 3rd iteration, in between the loop using handlebars? Ultimately I want to push inside a loop. I want to accomplish this with out modifying the .json data.
I have the following code in my index.handlebars.
<div class="container">
<h5>{{msg}}</h5>
{{#each channelData}}
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s1">
<img alt="" class="circle responsive-img align" src="{{subjectPhotoUrl}}">
</div>
<div class="col s5">
<div>
<h5 class="title">{{title}}</h5>
<br/>
<p class="description">{{description}}</p>
</div>
</div>
<div class="col s3">
<div class="align">
<img alt="" class="circle responsive-img" src=
"{{instructorPhotoUrl}}"> <span class="instructor">{{instructorName}}</span>
</div>
</div> {{/each}}
The following code is in my app.js file.
var channel = require("./data/channel.json");
app.get('/', function(req, res) {
res.render('index', {
msg:new Date(),
channelData: channel
});
});
I would also like to know if it is possible to manipulate the elements to have 2 of the 7 containers close together with 0 margin and a background of red? Meaning to manipulate the css for only two containers independently one of which has not been created yet and still iterate through them.
Also how would I be able to get the {{msg}} to display inside the loop, currently if I add the {{msg}} tag in place of {{title}} tag nothing displays, however it does display on the outside above the loop.
You can leverage the fact that within a loop #index refers to the current index, and define a custom block helper to conditionally render your markup depending on its value.
Of course, although you can do this with handlebars, this goes against its philosophy, and it would be more idiomatic to put any logic in the function formatting the data you pass to the template.
The helper could look like :
Handlebars.registerHelper('nthIteration', function(index, i, options) {
if (index === i) {
return options.fn(this);
}
return options.inverse(this);
});
And you would use it like this :
{{#each channelData}}
<!-- my regular markup -->
<div class="card-panel grey lighten-5 z-depth-1">
</div>
{{#nthIteration #index 2}}
<!-- markup to insert after third iteration -->
{{ ../msg }}
{{/nthIteration}}
{{/each}}
I'm not so clear about what you exactly want in your second question, but you can probably adapt the nthIteration block helper to your needs.
I am new to angularjs, I am facing some issues on getting and displaying one specific value from json file to show on my view page using angularjs ng-repeat for image source. Based on this key/value only I need to repeat the json file and need to get and display the specific value on my html page.
JSON:
[
{"name":"imageurl","value":"/images/Image1.nii"},
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
{"name":"imageurl","value":"/images/Image2.nii"},
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]
Here i need to repeat through key: imageurl and to display it's value on my html page. For first iteration, it should get first imageurl(like: /images/Image1.nii), and for second iteration, it should get second imageurl(like: /images/Image2.nii) value, and so on... I've created a fiddle at: FIDDLE . Please check once. So my desired output could be:
On first iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image1.nii">
<div id="3d0"></div>
<div id="sliceX0"></div>
<div id="sliceY0"></div>
<div id="sliceZ0"></div>
</div>
</div>
on second iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image2.nii">
<div id="3d1"></div>
<div id="sliceX1"></div>
<div id="sliceY1"></div>
<div id="sliceZ1"></div>
</div>
</div>
Please help me regarding this. Thanks in advance.
You need to change data structure, right now it makes little sense for the your task. Nesting 3D, X, Y and Z objects inside each imageurl objects would makes everything very simple:
[
{"name":"imageurl","value":"/images/Image1.nii", parts: [
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
]},
{"name":"imageurl","value":"/images/Image2.nii", parts: [
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]}
]
and then you would render it like this:
<div ng-repeat="item in newArr>
<div data-imgsrc="{{item.value}}">
<div ng-repeat="part in item.parts" id="{{part.value}}"></div>
</div>
</div>
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