Angularjs选择选项性能改进- 3000+数据按过滤器分组
提问于 2019-10-30 20:36:40
我有选择下拉列表，它过滤对应于所选选项的数据。如果未选中任何内容，则会显示3000+记录，这将冻结我的UI几秒钟。但对于拥有数百个数据的其他选项切换来说，它是完美和快速的。这里有什么方法可以提高性能吗？
下面是下拉过滤器，citylist是一个从服务器获取数据的数组。
Select City:<span class="float-right fa fa-window-close mb-2"
ng-click="sm.selectedCity=undefined;">
</span>
<select ng-model="sm.selectedCity" >
<option value="" selected hidden />
<option ng-repeat="s in sm.citylist"
ng-selected="sm.selectedCity" ng-value="">
{{s.value}}
</option>
</select> 以下UI数据根据上面选择的城市选项而有所不同。最初，没有选择为分组的国家对象之一获取超过3000个数据的选项。
下面简单解释一下，UI...sampledata是一个从服务器填充的复杂对象。sampledata包含分组的国家/地区属性，可以通过单击右侧的加号/减号将其折叠或展开。根据选定的城市筛选器，分组的国家/地区将发生变化。它可以很好地处理较少的数据。但如果其中一个国家/地区有更多数据(如(3000+) )，我的UI会在清除过滤器时冻结
<div ng-repeat="(key, value) in sm.sampledata | filter:{STFilter:sm.selectedCity} | filter:{someother } | filter:search.number | orderBy:'Country' | groupBy: 'Country' track by $index">
<div class="mb-5">
{{ key }} ({{ value.length }})<span ng-class="sm.toggle[$index] === true ? 'fa fa-minus' : 'fa fa-plus'" ng-click="sm.toggle[$index] = !sm.toggle[$index]" class="pull-right"></span>
</div>
<div ng-show="sm.toggle[$index]">
<div ng-repeat="o in value">
//o is a complex object in which one of the object needs to be filtered based on selected option from dropdown
<div>
{{o.sample1}}<span class="pull-right">{{o.sample2}}</span>
</div>
//Still more will come
</div>
</div>
<hr />
</div>注意:我使用的是angular 1.7.2版本
回答 1
Stack Overflow用户
发布于 2019-10-30 21:10:26
要提高性能，请使用ng-options指令。
从文档中：
在
ngRepeat和ngOptions之间选择
在许多情况下，可以在<option>元素上使用ngRepeat而不是ngOptions来实现类似的结果。但是，ngOptions提供了一些好处：
通过在instance
- increased而不是individually
中创建选项，而不是为每个重复的
<select>创建新的作用域，在如何通过select分配documentFragment模型方面具有更大的灵活性，这是repeated expression- reduced memory
- 的一部分
具体地说，在Chrome和in / Edge中，从2000 options开始，select with repeated options显著减慢。
有关详细信息，请参阅
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58633288
复制相关文章
点击加载更多
腾讯云开发者
