CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Daniel Ellison
Daniel Ellison

Reputation: 1349

Angular JS - NG-Repeat with filters and groupBy

I am building a dashboard to display ogoing and closed issues. I got everything working with angular's ng-repeat with filters and grouped by date. Here is a quick sample of what I got so far:

<div ng-app="myApp">
        <div ng-controller='TestGroupingCtlr'>
            <div ng-repeat="item in MyList | filter: {status: 'Closed'} | groupBy:'groupfield' " >
                <h2 ng-show="item.groupfield_CHANGED">{{item.groupfield}}</h2>
                <ul>
                    <li>{{item.whatever}} - Status: {{item.status}}</li>
                </ul>
            </div>
        </div>
</div>

Heres my scope array:

$scope.MyList = [
    {groupfield: 'Day Before', whatever: 'Server X down', status: 'Open'},
    {groupfield: 'Yesterday', whatever: 'Access issues', status: 'Open'},
    {groupfield: 'Yesterday', whatever: 'Server Z is down', status: 'Closed'},
    {groupfield: 'Today', whatever: 'Network problem', status: 'Closed'},
    {groupfield: 'Today', whatever: 'Network is down', status: 'Closed'}
];

Sample of my JSfiddle: http://jsfiddle.net/R8YZh/6/

My problem is that I need cases still Open to show under Today's group only. Now technically I could simply create a new ng-repeat to show only Open issues and sneak that right under my first list. But since I have a very large template with alot of the issues details, I want to avoid to 2 maintain 2 templates.

Would anyone know if there is a way to simply use the existing Ng-repeat and tell is to show all Open issues at the end of the index array so it finds itself in Todays group somehow? Any help is appreciated.

This is what I wished would display:

Yesterday

Server Z is down - Status: Closed

Today

Network problem - Status: Closed
Network is down - Status: Closed
Server X down - Status: Open
Access isses - Status: Open

Upvotes: 3

Views: 6086

Answers (2)

Anthony C
Anthony C

Reputation: 2157

It may be easier to apply the filtering to the li element level instead of doing it in the group level

<div ng-app="myApp">
        <div ng-controller='TestGroupingCtlr'>
            <div ng-repeat="item in MyList | groupBy:'groupfield' " >
                <h2 ng-show="item.groupfield_CHANGED">{{item.groupfield}}</h2>
                <ul >
                    <li ng-show="item.status=='Closed' || item.groupfield=='Today' ">{{item.whatever}} - Status: {{item.status}}</li>
                </ul>
            </div>

        </div>

</div>

Upvotes: 2

mcrvaz
mcrvaz

Reputation: 659

When you call filter, as said in documentation, "The final result is an array of those elements that the predicate returned true for.", that is, won't include any item with status "Open".

That means you should do another ng-repeat to show the ones that are "Open". It probably won't affect performance too much, but, if you wan't to keep things fast and organized, consider using pagination. You can also create your own custom filter if you really don't wan't to use another ng-repeat or paginate.

Upvotes: 1

Related Questions