Question

据我所知，选择框中的2000个选项会带来一些性能问题，但它在Chrome，Firefox和Safari上运行良好。

基本上，我正在调用填充选择框的Web服务。这相当快，初始加载时性能很好。问题是我更改路线，然后返回到页面上的选择框。在IE上加载视图需要大约40秒。无论如何都有提高绩效的方法吗？

这就是它的设置方式：

    <select name="" id="" ng-model="model.searchParams.shipto" ng-options="ship.cd as ship.cd + (ship.cd===''?'' : ' - ') + ship.ds for ship in shiptoSelect" class="dropdownbar"></select>

这是用于检索结果的调用。这只执行一次，然后结果存储在我的globalParams中。因此，当我返回到此视图时，不会执行此操作，并且会从我的globalParams服务加载结果。那是我遇到性能问题的时候。

    $scope.getShipTo = function() {
            $scope.model.searchParams.shipto = '';
            $scope.model.showProgress = true;
            MagicAPI.getShipToResults($scope.model.searchParams.brand, $scope.model.searchParams.soldto).then(function(response) {
                if (response.status === 200) {
                    var resSHIPAR = eval(response.data);
                    var resSHIPStr = resSHIPAR;

                    if (resSHIPStr.length * 1 === 0) {
                        globalParams.getAlertList().push({
                            type: 'info',
                            msg: 'No ship-to\'s exist for this account.'
                        });
                        $scope.model.showProgress = false;
                        return;
                    } else {
                        var selectObj = {
                            cd: '',
                            ds: '-- select --'
                        };
                        resSHIPStr.splice(0, 0, selectObj);
                        globalParams.setShipToList(resSHIPStr);
                        $scope.shiptoSelect = resSHIPStr;
                        $scope.model.showProgress = false;

                        for (var i = 0; i < resSHIPStr.length; i++) {
                            if(resSHIPStr[i].cd === $scope.model.searchParams.soldto) {
                                $scope.isSoldToMatch = true;
                                return;
                            } else {
                                $scope.isSoldToMatch = false;
                            }
                        } 
                        if ($scope.isSoldToMatch === false) {
                            globalParams.getAlertList().push({
                                type: 'info',
                                msg: 'No ship-to\'s exist for this account.'
                            });
                        }
                    }
                }
            }, function(response) {
                $log.debug(response);
            });
        };

Answer 1

您应该真正阅读track by并实施它

https://docs.angularjs.org/api/ng/directive/ngOptions

然后您的选择变为

<select name="" id="" 
  ng-model="model.searchParams.shipto" 
  ng-options="ship.cd as ship.cd + (ship.cd===''?'' : ' - ') + ship.ds for ship in shiptoSelect track by ship.id" class="dropdownbar"></select>

IE中的AngularJS Select Box有2000个选项

1 个答案: