Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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:&nbsp;{{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'">&nbsp;</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.

share|improve this question

1 Answer 1

You could implement a $watch handler:

JS

app.controller('ctrl', function($scope, $filter) {
    $scope.result = ...;
    $scope.actionList = [];
    $scope.$watchCollection('result.items', function(newArr) { 
         $scope.actionList = $filter('filter')(newArr, { type: 'action' }, true);
    });
});

HTML

<ul>
   <li ng-repeat="item in actionList">{{ $index }}</li> 
</ul>
share|improve this answer
    
I figured it would be something like that -- a watch handler with a filter -- but I'm still trying to get the hang of this. Thanks for replying, I will give your answer a try today and let you know how it goes. –  code-sushi 17 hours ago
    
Not sure this would work given my template -- sample showing the layout structure has been added. Maybe there's something I'm missing but I can't figure out how to display all results but only use the filter for the $index -- seems to me if I filter it, the whole display will filter, and I don't want that. –  code-sushi 14 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.