using part of a list in angularJS ng-repeat

Question

I'm doing an angularJS data-binding as follows:

<div class="timeSlotWrapper">
<div class="timeSlotItem" ng-repeat="t in timeSlots" time-slot-obj="t" id ="{{t.id}}"
     ng-click="timeSlotClick(cardId, $index)">{{ t.signalingTimeSlot}}</div>
</div>

the collection timeslots contain some 60 items, 30 of each belonging to one category. Lets say typeId is 0 for 30, and 1 for the other 30. I want to use ng-repeat for the first 30 only. Is it possible to do within ng-repeat or do I have to create the collection according to my need in code behind?

Does this answer your question: http://stackoverflow.com/questions/17643361/ngrepeat-limiting-number-of-displayed-results ? — Yngve B-Nilsen, Jul 23 '14 at 06:43
(t in timeSlots | filter:{typeId:0}) ; please let me know if it doesn't work. — micronyks, Jul 23 '14 at 06:46

score 2 · Accepted Answer · answered Jul 23 '14 at 06:51

2

<div class="timeSlotWrapper">
<div class="timeSlotItem" ng-repeat="t in timeSlots | filter:{typeId:0}" time-slot-obj="t" id ="{{t.id}}"
     ng-click="timeSlotClick(cardId, $index)">{{ t.signalingTimeSlot}}</div>
</div>

answered Jul 23 '14 at 06:51

micronyks

54,797
15
112
146

V31 · Answer 2 · 2014-07-23T06:56:39.043

1

You can make use of angular filter. Example for same

myApp.filter('filterList', function () {
    return function(id) {
        if(id==1)
           return id;
    }
});

And in your html markup

<div class="timeSlotItem" ng-repeat="t in timeSlots | filterList:t.id" time-slot-obj="t" id ="{{t.id}}"
 ng-click="timeSlotClick(cardId, $index)">{{ t.signalingTimeSlot}}</div>

UPDATE:

If 1 need not be hardcoded then a $scope object can be used in the filter:

myApp.filter('filterList', function () {
    return function($scope) {
       $scope.Objs.forEach(function(Obj){
        if(id==$scope.Obj.id) {
           return id;
           }
       });
    }

});

and in html markup pass this object

<div class="timeSlotItem" ng-repeat="t in timeSlots | filterList:this" time-slot-obj="t" id ="{{t.id}}"
     ng-click="timeSlotClick(cardId, $index)">{{ t.signalingTimeSlot}}</div>

Documentation on Angular Filters

edited Jul 23 '14 at 06:56

answered Jul 23 '14 at 06:44

V31

7,626
3
26
44

Thanks for the suggestion. Well the filter value too varies from 0-8, so I can't hard-code 1 there. In that case, how do I pass the desired filter value to the filterList, other than the id? – devC Jul 23 '14 at 06:52
@CHAT_2013: Updated the answer. See the update section – V31 Jul 23 '14 at 07:03
I think the answer marked for this question has hard coding in it as well...need to update that... – V31 Jul 23 '14 at 11:54

using part of a list in angularJS ng-repeat

2 Answers2