I am trying to find some documentation for being able to append a counted number to each item returned by an ng-repeat. Is this not an out of a box thing for Angular? Not quite like an Id, but more like, if 4 items returned, each item JSON object could add a number in front of data returned. My code looks like:
<div class="swipeBoxes" ng-repeat="swipe in swipes">
<a href="#">
<div class="swipeBox">
<span class="swipeNum"></span>
<p><span>swipe date:</span><span>{{ swipe.date | date: 'MM/dd/yyyy'}}</span></p>
<p><span>provider:</span><span>{{ swipe.merchant }}</span></p>
<p><span>amount:</span><span>{{ swipe.amount | currency }}</span></p>
</div>
</a>
</div>
You can use $index for your counter.
<div class="swipeBoxes" ng-repeat="swipe in swipes">
{{$index + 1}}
</div>
Using $index from ngRepeat should be able to solve your problems.
Related
I have a ng-repeat for an array of message objects, which prints out message.text and is accompanied by message.author.username. When I use {{message.author.username}}, it prints out the correct user, but I have that DOM element wrapped in an anchor, where ui_sref=profile(message.author.username) is set as the link.
For some reason the ui-sref link's reference to the username is presenting something totally different than what it's wrapped around. Like, when I hover over the linked username on the site, it shows that the link goes to a different username found later in the array. If it's using the same exact syntax (message.author.username) is there any reason for the text to be different when listed in an ui-router anchor tag? I feel like it's a bug but I'm not sure why and how to fix.
Hopefully that made sense... here's some code to be clear
<div class="col-sm-9 offset-sm-1"
ng-repeat="message in wall | orderBy: createdon:true | limitTo: 8">
<div class="comment-container">
<div >
<h6> <a ui-sref="profile(message.author.username)">{{message.author.username}}</a></h6>
</div>
<div class="comment-text">
{{message.text}}
</div>
<hr>
</div>
</div>
I'm stuck in a situation, in a nested loop. The top loop iterating over the Feeds array and every feed in Feeds have comments array. This comments is used for inner loop.
My problem is, I have Comment button and on click of that button, I want to show the list of comments only for that feed post. But instead of showing comments on current feed post, it is showing comments for all other feeds also, that's because of use of only one Boolean variable showComments created inside .ts file.
So how can make that work for only the given context Feed post?
HTML
<ng-container *ngFor="let feed of feeds">
<div class="ed-card ed-card-feed">
<div class="ed-card-feed--footer">
<div class="card-feed-values">
<a class="mr-4"><span>{{feed.likes_count}}</span> Likes</a>
<a><span>{{feed.comments_count}}</span> Comments</a>
</div>
<div class="card-feed-actions">
<a class="mr-5" (click)="likePost(feed.id)"><span></span> Like</a>
<span></span> Comment button
</div>
</div>
// Below div needs to be open for that particular feed only
<div *ngIf="showComments" class="ed-card-feed--comments">
<div class="feed-comments-list">
<ng-container *ngFor="let comment of feed.comments?.edges">
<div class="comment-list-item">
<p class="comment-box mt-1">
{{comment.node?.body}}
</p>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
P.S. - Please don't confuse with feed.comments?.edges that's just because of GraphQL. It is just an array.
Thanx
You can maintain an array of showComments[] equal to size of feeds with initially set to false. showComments[false,false...]
<ng-container *ngFor="let feed of feeds; let myIndex = index"">
//code here
<span></span> Comment button
//check if true
<div *ngIf="showComments[myindex] === true" class="ed-card-feed--comments">
</ng-container>
Instead of a boolean, you can define a selectedFeeds array:
selectedFeeds = new Array<Feed>();
In the template, you add the feed that has been clicked to selectedFeeds:
<a href="javascript:void(0)" class="mr-5" (click)="selectedFeeds.push(feed)>Comment button</a>
and you filter the comments according to the selected feeds:
<div *ngIf="selectedFeeds.indexOf(feed) >= 0" class="ed-card-feed--comments">
The best way to achieve this is to separate the code to different components. And since each of the component will have it's own instance of comments - you won't have a problem creating a local variable and showing/displaying the comments in there.
I've created an example of how it can be implemented: stackblitz
Another approach
<ng-container *ngFor="let feed of feeds">
Comment button
<div *ngIf="feed.showComments" class="ed-card-feed--comments">
</ng-container>
Js file
toggleComments(feed) {
feed.showComments = true // (feed.showComments = !feed.showComments => to show or hide (toggle))
}
It is possible to loop to the visible items in a ng-repeat?
I have a ng-repeat with multiple filters and I want to create a 'select all' function to select all the visible items in the repeat.
How can I get the visible items? The selection may be come undone when the filter is changing, so there are no 'old' selections possible, but that can be easily done to loop all items with no conditional.
<div class="item" ng-repeat='item in collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter'>
{{item.name}}
{{item.price}}
</div>
you can add a filter like this;
<div ng-repeat="item in items | filter:{visible: true} ">
<p>{{item.id}}</p>
</div>
You could define a variable that represents all visible items by using as expression with a ng-repeat directive:
<div class="item"
ng-repeat='item in (collection | product_sex:filter_sex | product_stock: stockKind | filter:productFilter) as allVisibleItems'>
{{item.name}}
{{item.price}}
</div>
You could access this variable easily, right underneath ng-repeat for example:
<div ng-click="selectAll(allVisibleItems)">Select all Items</div>
More can be read here: https://docs.angularjs.org/api/ng/directive/ngRepeat
I'm new to AngularJS and having to work on an app that has a section of nested ngRepeats such as this below.
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="loadMoreOrdersToList()">Load More</button>
</div>
</div>
The status.Orders list can be quite large at times so I limit it. When a user wants to view more data for that specific section (which is enumerated by status) I add 3 to the orderFilterLimit. The problem is when I do this it is adding 3 to every single .order-list in the .inner-pannel element. Is there a way I can change the orderFilerLimit variable based on an id or class of the element it's attached to?
For context here is a super simple snippet of what loadMoreOrdersToList() is doing.
https://jsbin.com/vapucixesa/1/edit?js
No need of declare the orderFilterLimit inside controller, You should have scope variable inside ng-repeat itself so that it ng-repeat element will have separate copy of orderFilterLimit because ng-repeat create a child scope on each iteration.
Markup
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes" ng-init="orderFilterLimit = 3">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="orderFilterLimit = orderFilterLimit + 3">Load More</button>
</div>
</div>
I am trying to sort data using orderBy in angular js, but it is not sorting data.
can any one help me out ?
please check fiddle
I am using following code
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:person.order">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
Two small changes, remove person, and add quotes
<div ng-repeat="person in data | orderBy:'order'">
Try the following:
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>
I hope this helps!
You need to put your parameter in single quotes as you are passing it to the filter function. 'param', and also since you are already iterating the object, just the property name is sufficient.
<div ng-controller = "fessCntrl">
<div ng-repeat="person in data | orderBy:'order'">
{{data.indexOf(person)}}
{{person.name}}
{{person.order}}
</div>
</div>