javascript - Angular JS - NG-Repeat with filters and groupBy - Stack Overflow

admin管理员组

文章数量:1435802

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

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

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

• javascript
• angularjs
• angularjs-directive
• angularjs-scope

Share Improve this question Follow edited Nov 18, 2016 at 22:53 Daniel Ellison asked Nov 18, 2016 at 22:48 Daniel EllisonDaniel Ellison 1,34744 gold badges2828 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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>

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.

本文标签： javascriptAngular JSNGRepeat with filters and groupByStack Overflow