Angularjs 角度-如何有效地过滤已排序的数组？

我有一个一天中可能发生的时间的排序数组，从00:00到23:59，总共有720个元素，所以它可能相当大

关于性能，最好的方式是在特定的指定时间之后（或之前）只显示次数？一个简单的过滤器将对数组中的所有元素执行检查，而不考虑时间已经排序的事实

有没有比下面的例子执行得更快的方法

<div ng-repeat="time in times" ng-if="timeAfter(time, specifiedTime)">
    {{time}}
</div>

{{time}}

为了获得最佳性能，我建议不要在整个阵列上使用ng repeat。您应该创建一个服务/工厂（比如说“TimeFilterProvider”），它将接收最短的时间并只返回匹配的时间。 它可以使用冒泡排序或任何其他排序算法来查找最短时间并返回数组的其余部分

---

如果使用ng filter或ng If，则必须扫描整个阵列，因此不要这样做。

角度

过滤器就是为此而设计的，而
ng If
由于可能不希望重新呈现DOM而具有潜在影响

尝试：


{{time}}

但是，这并不能解决拥有如此大阵列的根本问题。最好在数组变为ng重复之前减少它，如
中所述。您的问题取决于：“您的筛选/排序列表是可变的吗？”


每个指令（如ngIf、ngRepeat）或过滤器都将在每个$digestLoop上运行，因此，如果您的数据是可变的，就没有办法获得良好的性能
使用
track by
增加性能

但是，如果您的列表是不可变的，您可以将其作为已过滤的列表，并告诉angular通过“一次性绑定”打印它

例如：


函数ListCtrl（$scope，ListData，MINIMUM\u VISIBLE\u DATA）{
var vm=$scope；
vm.items=ListData.filter（函数（项）{
console.log（新日期（item.Date）>=最小可见数据，item）
返回新日期（item.Date）>=最小可见数据；
});
vm.rule=最小可见数据；
vm.length=vm.items.length+'/'+ListData.length；
}
有棱角的
.module（'testApp'，[]）
.controller（'ListCtrl'，['$scope'，'ListData'，'MINIMUM\u VISIBLE\u DATA'，ListCtrl]）
.value（'最小可见数据'，新日期（））
.value（'ListData'，[{“id”：1，“日期”：“2014-08-12T11:50:42Z”}，
{“id”：2，“日期”：“2013-12-19T08:35:42Z”}，
{“id”：3，“日期”：“2013-11-24T14:35:20Z”}，
{“id”：4，“日期”：“2016-10-26T20:18:59Z”}，
{“id”：5，“日期”：“2013-08-13T19:11:11Z”}，
{“id”：6，“日期”：“2014-11-28812:08:23Z”}，
{“id”：7，“日期”：“2014-07-28T14:56:34Z”，
{“id”：8，“日期”：“2013-04-14T21:12:55Z”}，
{“id”：9，“日期”：“2016-02-29T02:13:58Z”}，
{“id”：10，“日期”：“2016-02-06T09:29:34Z”，
{“id”：11，“日期”：“2015-12-20T02:18:47Z”}，
{“id”：12，“日期”：“2016-08-17T23:17:46Z”}，
{“id”：13，“日期”：“2016-05-01T23:02:59Z”}，
{“id”：14，“日期”：“2016-09-26T08:54:42Z”}，
{“id”：15，“日期”：“2015-09-14T16:27:25Z”}，
{“id”：16，“日期”：“2014-10-30T05:35:45Z”}，
{“id”：17，“日期”：“2013-12-18T05:30:17Z”}，
{“id”：18，“日期”：“2015-08-01T06:59:31Z”}，
{“id”：19，“日期”：“2014-08-26T15:57:11Z”}，
{“id”：20，“日期”：“2016-12-01T09:09:11Z”}，
{“id”：21，“日期”：“2016-05-03T13:21:00Z”}，
{“id”：22，“日期”：“2015-10-27T02:26:22Z”}，
{“id”：23，“日期”：“2013-07-04T21:54:06Z”}，
{“id”：24，“日期”：“2015-11-13T07:07:16Z”}，
{“id”：25，“日期”：“2014-12-19T12:27:58Z”}，
{“id”：26，“日期”：“2016-07-31T21:33:32Z”}，
{“id”：27，“日期”：“2013-08-21T08:54:43Z”}，
{“id”：28，“日期”：“2013-10-12T08:25:02Z”}，
{“id”：29，“日期”：“2015-09-30T20:09:52Z”}，
{“id”：30，“日期”：“2014-06-26T00:57:30Z”}，
{“id”：31，“日期”：“2014-05-25T16:15:56Z”}，
{“id”：32，“日期”：“2014-09-13T08:19:49Z”}，
{“id”：33，“日期”：“2013-08-04T08:00:55Z”}，
{“id”：34，“日期”：“2015-02-24T09:54:18Z”}，
{“id”：35，“日期”：“2014-09-06T23:28:36Z”}，
{“id”：36，“日期”：“2013-11-12T17:29:54Z”}，
{“id”：37，“日期”：“2016-11-06T10:56:33Z”}，
{“id”：38，“日期”：“2016-09-25T06:05:24Z”}，
{“id”：39，“日期”：“2015-04-12T21:54:16Z”}，
{“id”：40，“日期”：“2015-03-22T02:06:37Z”}，
{“id”：41，“日期”：“2015-02-01T16:56:06Z”}，
{“id”：42，“日期”：“2013-10-24T06:58:42Z”}，
{“id”：43，“日期”：“2015-06-16T16:14:06Z”}，
{“id”：44，“日期”：“2016-09-25T07:20:03Z”}，
{“id”：45，“日期”：“2014-06-11T13:32:36Z”}，
{“id”：46，“日期”：“2015-07-30T02:53:28Z”}，
{“id”：47，“日期”：“2015-10-08T13:43:18Z”}，
{“id”：48，“日期”：“2016-01-08T14:19:59Z”}，
{“id”：49，“日期”：“2013-05-28:00:51Z”}，
{“id”：50，“日期”：“2016-05-20T11:02:26Z”}，
{“id”：51，“日期”：“2014-05-12T03:05:02Z”}，
{“id”：52，“日期”：“2013-10-22T04:29:57Z”}，
{“id”：53，“日期”：“2015-06-01T21:22:15Z”}，
{“id”：54，“日期”：“2015-02-25T02:54:36Z”}，
{“id”：55，“日期”：“2016-10-24T16:52:01Z”}，
{“id”：56，“日期”：“2015-02-06T15:32:43Z”}，
{“id”：57，“日期”：“2013-10-19T19:34:14Z”}，
{“id”：58，“日期”：“2014-09-13T09:52:34Z”，
{“id”：59，“日期”：“2013-11-05T23:04:04Z”}，
{“id”：60，“日期”：“2014-06-20T07:44:36Z”}，
{“id”：61，“日期”：“2014-04-24T10:33:03Z”}，
{“id”：62，“日期”：“2016-06-20T07:13:06Z”}，
{“id”：63，“日期”：“2014-06-14T13:08:50Z”}，
{“id”：64，“日期”：“2015-08-16T02:35:52Z”}，
{“id”：65，“日期”：“2014-07-04T10:15:12Z”}，
{“id”：66，“日期”：“2014-05-06T16:58:07Z”}，
{“id”：67，“日期”：“2014-12-11T07:19:12Z”}，
{“id”：68，“日期”：“2015-09-28T02:27:31Z”}，
{“id”：69，“日期”：“2016-04-25T19:11:41Z”}，
{“id”：70，“日期”：“2016-01-01T23:35:37Z”}，
{“id”：71，“日期”：“2013-08-11T18:40:23Z”}，
{“id”：72，“日期”：“2015-02-22T03:11:37Z”}，
{“id”：73，“日期”：“2013-09-15T13:46:19Z”}，
{“id”：74，“日期”：“2014-02-15T21:50:25Z”}，
{“id”：75，“日期”：“2013-01-27T19:27:04Z”}，
{“id”：76，“日期”：“2015-07-22T10:50:53Z”}，
{“id”：77，“日期”：“2013-02-22T22:26:14Z”}，
{“id”：78，“日期”：“2013-03-28T07:17:34Z”，
{“id”：79，“日期”：“2013-07-05T03:21:54Z”}，
{“id”：80，“日期”：“2013-04-20T13:58:38Z”}，
{“id”：81，“日期”：“2013-06-09T06:10:06Z”}，
{“id”：82，“日期”：“2015-01-30T20:20:56Z”}，
{“id”：83，“日期”：“2013-03-07T08:57:22Z”}，
{“id”：84，“日期”：“2014-02-15T06:46:32Z”}，
{“id”：85，“日期”：“2015-04-25T01:11:15Z”}，
{“id”：86，“日期”：“2016-07-29T17:55:34Z”}，
{“id”：87，“日期”：“2016-08-30T11:21:21Z”}，
{“id”：88，“日期”：“2013-08-25T15:26:28Z”}，
{“id”：89，“日期”
<div ng-repeat="time in times | filter: timeAfter(time, specifiedTime)">
   {{time}}
</div>

var timeToMinutes = function(time) {
    var selectedTimedata = time.split(":");
    return selectedTimedata[0] * 60 + parseInt(selectedTimedata[1], 10);
};

// The following arrays are created using simple iteration, but simplified for this example
var times = ["0:00", "0:01", "0:02"]; //...and so on
var timeminutes = [0, 1, 2];

var start = !$scope.startTime ? 0 : _.sortedIndexOf(timeminutes, timeToMinutes($scope.startTime));
var end = !$scope.endTime ? timeminutes.length : (_.sortedIndexOf(timeminutes, timeToMinutes($scope.endTime)) + 1);                        
$scope.times = times.slice(start, end);