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.
Related
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 trying to repeat 4 elements in a 2x2 matrix format with top and bottom separate rows. For that I'm using ng-repeat to repeat the top and bottom rows and then another ng-repeat inside to repeat the two elements. I have done it and got the required format. But my problem is that I need to provide different titles for these 4 elements(div). How can I give the titles in an array so that it will be repeated in both rows? Below is my code:
<div class="massage-type-section" ng-controller="massageController">
<div class="select-massage-type" ng-repeat="item in massage">
<div class="massage-choice" ng-repeat="type in massageType">
<div class="massage-choice-icon">
<img src="images/single-icon-deselect.png">
<img src="images/single-icon.png">
</div>
<p class="massage-title">{{type.title}}</p>
<p class="section-details">One massage practitioner comes to massage one person.</p>
<div class="type-selected"><img src="images/selected.png"></div>
</div>
</div>
</div>
function massageController($scope) {
$scope.massage = [{}, {}];
$scope.massageType = [
{ title: 'Single' },
{ title: 'Couple' }
];
};
If your primary requirement in the inner array is only to display the massage Type titles, your array looks good. Please mark as answer if this helps.
if your requirement is to give different titles in different levels use $index or $parent.$index in appropriate way.
To find the index of an item in the collection use $index property
To get the index of the parent element
Use $parent.$index or
Use ng-init="parentIndex = $index"
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 have an ordered list of items that I want to be displayed. Getting this done with Angular is trivial:
<p>Filter a game: <input type="text" ng-model="search.name" /></p>
<game-card ng-repeat="game in games | filter:search" game ="game" size="large"></game-card>
This outputs an ordered list of games that has been sorted from the database. However, I want to show a few snippets of arbitrary content inside this ng-repeat. This diagram below indicates what I'm after. The lefthand side shows how it should look in the unfiltered state, the righthand side if a search term as present.
As you can see, I want to highlight the first item with a "Next up" heading, and following that, an "After that" heading. When a search is present, I don't want these headings at all as they won't be relevant.
I'm completely new to Angular ("you lost me at service" new, by the way), but have come from a Knockout.js background. What is the "Angular way" of solving this?
Stack up ng-if's on the headings and compare with $index? Does $index even care about the filter being applied?
Kind of dirty solution: within the ng-repeated element, put something like
<div ng-if="$index === 0">
<h2>Next up</h2>
</div>
<div ng-if="$index === 1">
<h2>After that</h2>
</div>
<div>
<!-- Your content goes here, unconditionally -->
</div>
And the obvious problem with this is that two tests are performed for each "instantiation" of the content of the ng-repeated element, and they are useless except for the first and second.
Otherwise you could place your first two bits of contents with headers outside the ng-repeat and then start repeating from index 2, but I'm not sure that's possible with ng-repeat.
If it's not, then split your data into firstElement, secondElement and rest where rest is Array.prototype.slice.call(/* your initial list of elements */, 2).
The problem with this last solution is that it requires you to adapt your data to how you present it, which is undesirable for obvious reasons.
edit: OK here's something better, not tested:
<div ng-if="elements.length > 0">
<h2>Next up</h2>
<div><!-- First content goes here, it uses elements[0] --></div>
</div>
<div ng-if="elements.length > 1">
<h2>After that</h2>
<div><!-- Second content goes here, it uses elements[1] --></div>
</div>
<div ng-repeat="element in elements.slice(2)">
<!-- The rest goes here, unconditionally -->
</div>
Instead of doing your ng-repeat in the game-card tag, do it in a wrapping div and then use ng-repeat special variables:
<p>Filter a game: <input type="text" ng-model="search.name" /></p>
<div ng-repeat="game in games | filter:search">
<div ng-if="$first">NEXT UP</div>
<div ng-if="$index === 1">AFTER THAT</div>
<game-card game="game" size="large"></game-card>
</div>
My solution was to ng-show the titles only if the length of the results passed through the filter equaled the total number of games:
<h2 ng-show="games.indexOf(game) == 1 && search.length == games.length">More Games</h2>
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>