Angularjs选择选项“性能改进-通过过滤器处理3000多个数据”

Question

我具有选择下拉列表，该下拉列表过滤与所选选项相对应的数据。如果未选择任何内容，那么它将显示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数据根据上面选择的城市选项而异。最初，没有一个选项被选中，该选项为一个分组的Country对象获取了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版本

Answer 1

要提高性能，请使用ng-options指令。

来自文档：

在ngRepeat和ngOptions之间选择

[在许多情况下，可以在ngRepeat元素上使用<option>而不是ngOptions以达到类似的结果。但是，ngOptions提供了一些好处：

• 更灵活地通过选择将<select>的模型分配为理解表达式的一部分
• 未通过为每个重复的实例创建新作用域的方式减少了内存消耗
• 提高渲染速度
，而不是单独在documentFragment中创建选项

特别是，在Chrome和Internet Explorer / Edge中，选择<>

有关更多信息，请参阅

• AngularJS <select> Directive API Reference - Choosing between ngRepeat and ngOptions

<select>

---

ngRepeat