Question

我正在构建一个仪表板来显示ogoing和已关闭的问题。我使用过滤器对角度的ng-repeat进行了一切处理，并按日期分组。以下是我到目前为止的快速示例：

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

继承我的范围数组：

$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'}
];

我的JSfiddle示例： http://jsfiddle.net/R8YZh/6/

我的问题是我需要打开的案例才能在今天的小组中显示。从技术上讲，我可以简单地创建一个新的ng-repeat来显示Open问题并在我的第一个列表中隐藏。但由于我有一个非常大的模板，有很多问题的细节，我想避免2维护2个模板。

有人知道是否有办法简单地使用现有的Ng-repeat并且告诉是在索引数组的末尾显示所有Open问题，以便它以某种方式在Todays组中找到它自己？任何帮助表示赞赏。

这是我希望展示的内容：

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

Answer 1

将过滤应用于li元素级别而不是在组级别中执行它可能更容易

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

Answer 2

当您调用filter时，如documentation中所述，“最终结果是谓词返回的那些元素的数组。”，即不包含状态为“Open”的任何项目

这意味着你应该再做一次ng-repeat来显示那些“开放”的。它可能不会对性能产生太大影响，但是，如果你不想保持快速和有条理的事情，可以考虑使用分页。如果您真的不想使用其他ng-repeat或paginate，也可以创建自己的自定义过滤器。

Angular JS - NG-Repeat with filters and groupBy

2 个答案: