Please be patient if I don't understand something and need clarification as I'm still new to Angular, and please simplify explanations for an Angular newbie if you can, thanks!
I am working on a table display of data drawn from a database and using ng-repeat to generate it as something like "item in results.items". There are three "types" of item, let's just call them "title", "action" and "comment". Since results.items is the array, the $index
goes by item placement in the whole array regardless of type.
What I want to do is be able to number only ONE type of item, item.type=='action'
. Obviously if I just put
<td ng-show="item.type=='action'">{{$index}}</td>
it is going to go by the original array index, so instead of having my data with each 'action' numbered 1, 2, 3, etc. in sequence, I end up with them numbered as they fall in the array, something like: 5, 8, 9, 12, 15, 16, 22.
Can anyone clue me in on a straightforward way to set up the generation of a new $index
(such as '$actionIndex'
) in my controller that will re-index only the items that are of type=='action'? Ideally I'd like to be able to designate a $scope
function for this in my controller and then just call it with ng-model or something.
I know this inquiry is lacking in the code sampling department -- it's a little awkward in this case for me because I'm still pretty new to Angular and I can't just copy the actual code due to company NDA rules. Thanks for bearing with me and any assistance you can lend.
EDIT/UPDATE:
After reviewing the solution offered by pixelbits, I am wondering whether what I should do here instead is create a new associated id # for each item where "type==action"
and just increment it with each successive item where "type==action"
?
I don't want to filter items with "type!=action"
out of the display entirely. Right now it is using an inclusive ng-repeat
and sorting so that other types of "item", where applicable, appear in proper order under this type (item==action
) to explain/enhance it. This means I have <tr>
set up with the ng-repeat="item in items"
and then <span>
tags within the td
cells per row to ng-show
depending on type
. I'm not seeing how to logically use a different ng-repeat
based on type
. I just want to reindex all type==action
items and display that new index numeral instead of that of the larger default array "items
" itself.
Still working on it ...
Here is a code snippet from the template to illustrate:
<tbody>
<tr ng-repeat="item in items" ng-class="{title: item.type=='title', action: item.type=='action', comment: item.type=='comment'}">
<td class="grid-2">
<span ng-show="item.type=='action'">{{$index}}</span>
<span ng-show="item.type!='action'"> </span>
</td>
<td class="action-text grid-8">
<span class="title regular-item" ng-show="item.type=='title'">
<h3>{{item.field}}</h3>
</span>
<span class="action regular-item" ng-show="item.type=='action'">{{item.field}}</span>
<span class="comment" ng-show="item.type=='comment'"><i>Comment by: {{item.author}}<br />{{item.field}}</i></span>
</td>
<td class="grid-2">
<span ng-show="item.type=='action'" class="timestamp" data-toggle="tooltip" data-original-title="{{item._created | date: 'hh:mm:ss a'}}">{{item._created | date: 'hh:mm:ss a'}}</span>
<span ng-show="item.type!='action'"> </span>
</td>
</tr>
</tbody>
So as you can see I have the general ng-repeat and then the template lays it out according to type. "Action" is a pretty "important" type as it has special displays the others do not.