Angular4 - Show next 5 items in array through click - arrays

I have an array filled with TV shows. TV shows which I have watched recently:
tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', 'Prison Break'];
As you can see, the array contains more than 5 items. So I did this to show only 5 tv shows:
<div class="tvShow_row" *ngFor="let tvShowName of (tvShows | slice:tvShows.length - 5)">
<span class="tvShow_name">{{tvShowName}}</span>
</div>
Now, I want to have a simple button for displaying the next 5 items in the array together with my current 5 items. Obviously, the list gets longer based on the items in the array, but the principle is to show the next 5. The problem is, I don't know how to load the next 5 items from my array. Also, if I don't have 5 (because there are 7 items in the array for example), then I still want to show the rest of the array. I tried showing more items by printing the array, but then it only shows the first 5 items again, which makes sense, I guess. Does anybody know how to tackle this problem?

Maybe something like this:
*ngFor="let item of items | slice:0:[max]"
toggle(): void {
this.max = this.max + 5;
}
So setting max will show more items in the array. Without copying array and other stuff.

Related

Strange behavior of ng-repeat filter

I am using following ng-repeat statement
ng-repeat="instrument in Instruments | filter : (!systemTypeCatgory?'': {CategoryTypeId : systemTypeCatgory})"
There is a dropdown in which systemTypeCatgory is selected and based on that selection next dropdown is populated using above ng-repeat statement.
Everythinng was working fine till I had CategoryTypeId from 1 to 9 in the database. Recently new category is added with CategoryTypeId = 10 and now whenever I selected category with Id = 1 in the first dropdown, along with items from category=1 it includes items from ategory=10 also in the second dropdown.
But the vice-versa is not happening, meaning when I select category = 10 it shows items from category = 10 only.
It is only failing when I select category = 1.
Not sure, somewhere if it is comparing 1-1 in the start or what. Somewhere it is considering 1=10 and so the items are coming from both the categories
I have tried printing the values of CategoryTypeId and systemTypeCatgory ,the code is picking them correctly.
Not getting why it is failing, any clue?
Edit
Tried converting everything to string and tried this harcoding also just to check
ng-repeat="aiisInstrument in AiisInstruments | filter : { CategoryTypeId : '1'}"
It is still selecting category=10 items!! Super strange behavior :(

Return to a position in a list after displaying the card details with AngularJs

I have a list in a ng-repeat after the user enters an item in the list and then back to the list, I would like it to come back with the list open but with the screen over the item he just saw instead of returning to start the list.
P.S.: The need is that he continue to display the previous cards as well. Reason: This is a creature list. he went in to view her data and returned to the list. the ideal is to return to the position he was in, but when the list is returned at position 0 of the array.

print no of items fetched using pagination in cakephp 3

I want to display count of no of items fetched per page using pagination like
Displaying 10 items
Although limit is set to pagination to 20 but It will not always fetch 20 items when there are only 15 items or 10 items or 25 items.
In these cases it will either have one page result for items count 15 and 10 or two pages result for items count 25.
I want to print the no of items showing on each page. Like for total items 25.
It will show Displaying 20 items on first page and Displaying 5 items on second page.
How is it possible in CakePHP 3.2 ?
This is how I get it working in CakePHP 3.2
There are two ways you can do it.
Using Helpers
create a file paginator-counter.php in /config directory with your tokens and string and add a line in /src/view/AppView.php
public function initialize()
{
$this->loadHelper('Paginator', ['templates' => 'paginator-counter']);
}
This will load the file located at config/paginator-templates.php
And then use it in your view.
For more : http://book.cakephp.org/3.0/en/views/helpers/paginator.html
Using direct string
Just print in view where you want to print the counter
<?= $this->Paginator->counter('Showing {{current}} results out of {{count}}') ?>
More tokens can be found Here : http://book.cakephp.org/3.0/en/views/helpers/paginator.html#creating-a-page-counter
I'm using 2nd way to print counter ie., using sting directly

How to change to same image every 4 times(unity3D)

I've got a 2d image. What I want to make it do is- everytime I click the sprite it would change an image(in a specific order) and repeat the image every 4 times I click it(So it loops the order every 4 times). I don't have an idea for how to do it because I'm new to unity. Thanks in advance.
Presumably you've got an array or list of the images in the order you want them shown in (I'll call this images), and you've got a way of detecting a click on the sprite. There are many ways you can do what you want in code, one of them would look something like this:
int imageNum = 0; //this should be class wide
...
<sprite click detection>
{
imageNum++; //increment the imageNum
imageNum = imageNum >= 4 ? 0 : imageNum; //reset to 0 on the 4th click
sprite = images[imageNum]; //set the sprite to the next image
}
If you post what you've already tried I can make this code closer to what you actually want.
Try learning some c# or basic java tutorials before jumping into the world of unity, it will help tons. As for the question, create a script for the object or clicking an event with an basic counter that increments the value by 1 for every click. something like:
while(counter = 4)
{
picture.source = <new picture>
counter.int = 1
}
or something to that effect.

Retrieve specific index from arraycollection

I can't seem to work this out. I want to display a list that starts with a specific position in an arraycollection, without changing the array. The goal is to have a set of full screen images that the user can swipe through (like in an ebook), and for the chapter index i want to start with a specific indexnumber in the arraycollection.
Is there a simple way to tell the Itemrenderer to start at a specific indexnumber in the arraycollection.
My code that starts at index 0:
<s:List id="pagedList"
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="on"
pageScrollingEnabled="true">
<s:layout>
<s:TileLayout orientation="rows" requestedRowCount="1"
columnWidth="{pagedList.width}" rowHeight="{pagedList.height}"
verticalGap="0" horizontalGap="0"/>
</s:layout>
<s:ArrayCollection id="contentData">
<s:Image source="assets/cover.jpg"/>
<s:Image source="assets/introduction.jpg"/>
<s:Image source="assets/H1/40_days.jpg"/>
</s:ArrayCollection>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group>
<s:Image source="{data.source}" horizontalAlign="center"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
AFAIK there is no way to do this. You'll have to sort the dataprovider so that it matches the order in which you want to display the items.
If you don't want to modify the original collection, you can create a ListCollectionView, pass in the original collection to the constructor and add a sort to the ListCollectionView. You can then assign the collection view as the dataprovider of your list.
It all starts with your data. The data itself will need to contain info about a chapter offset. Typically you will store a collection of the offset seek points.
For example:
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Chapters: 1 2 3 4 5
A chapter object will hold a reference to which page to start from and its total length. A set of seek buttons will iterate through a chapter collection, telling your list to start from the appropriate offset (ie chapter 2, starts on index 4 and is 4 items long).
Your page objects can either be a single image, or a collection of images per page. In either case, what you're really building from a data point of view is a hierarchical collection.
if your goal is to show a particular image first why not set the selectedIndex for the List itself. I mean give u'r dataobjects in the dataprovider some id and pass on the index to the list.
hope this help, let me know if this is not what is intended
Might the ensureIndexIsVisible method on the Spark List work?
Note: You may need to click the "Products" checkbox at the top of the following html page to actually see this method.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/List.html#ensureIndexIsVisible()

Resources