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
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>