Question

在我的控制器中，我有一个对象（sorted_users），其中包含人员的姓名和linkedIn ID，按字母顺序排序：

{
  "A":[
    {"Name":"an something","linkedInID":"..."},
    {"Name":"arthur somethingelse","linkedInID":"..."},
    {"Name":"ashton lastname","linkedInID":"..."}],
  "B":[
    {"Name":"ben blabla","linkedInID":"..."},
    {"Name":"bianca someone","linkedInID":"..."},
    {"Name":"borris random","linkedInID":"..."},
... and so on

我的HTML：

<div ng-repeat="(letter, names) in sorted_users" class="alpha_list">
    <ion-item class="item item-divider" id="index_{{letter}}">
        {{letter}}
    </ion-item>
    <ion-item class="item-icon-right" ng-repeat="n in names | filter :{Name:search}">
        <h2>{{n.Name}}
            <i class="icon ion-social-linkedin" ng-if="n.linkedInID" ng-click="openlinkedin(n.linkedInID)"></i></h2>
    </ion-item>
</div>

虽然这有效，但当有+400人时，我会遇到性能问题。单击链接到人员所在页面的链接会导致暂停3-4秒。之后，动画启动，应用导航到人物页面。

我曾经向没有字母分隔符的人展示。我的阵列看起来像这样：

[
   {"Name":"an something","linkedInID":"..."},
   {"Name":"arthur somethingelse","linkedInID":"..."},
   {"Name":"ashton lastname","linkedInID":"..."},
   {"Name":"ben blabla","linkedInID":"..."},
   {"Name":"bianca someone","linkedInID":"..."},
   {"Name":"borris random","linkedInID":"..."},
... and so on

在我的HTML中，我可以使用collection-repeat：

    <ion-item class="item-icon-right" collection-repeat="n in unsorted | filter :{Name:search}">
        <h2>{{n.Name}}
            <i class="icon ion-social-linkedin" ng-if="n.linkedInID" ng-click="openlinkedin(n.linkedInID)"></i></h2>
    </ion-item>

这消除了性能问题，但不允许我使用字母分隔符。

我看到两种解决方案可以满足我的需求：

可能的解决方案1：

对sorted_users使用collection-repeat。我无法让这个工作：collection-repeat expected an array for 'sorted_users', but got a undefined

可能的解决方案2：

单击按钮时显示加载微调器，延迟后再次将其删除以导航到该页面。我已经尝试将其添加到我的控制器中：

$scope.gotopeople = function()
{
    $ionicLoading.show({
        content: 'Processing...',
        template: "<ion-spinner></ion-spinner><br />Processing...",
        showBackdrop: true,
        showDelay: 0
    });

    $timeout(function () {
        window.location="...link to people page...";
    }, 100);
};

然后：

    $scope.$on('$ionicView.beforeLeave', function(){
        $ionicLoading.hide();

    });

这似乎有效，但在延迟期间，旋转器冻结并停止“旋转”。它就在那里，但它看起来像应用程序崩溃（事实并非如此）。

Answer 1

感谢

，您可以多次尝试加载列表

<ion-infinite-scroll
 ng-if="moreDataCanBeLoaded()"
 on-infinite="loadMore()"
 distance="1%">
</ion-infinite-scroll>

ng-repeat导致Ionic应用程序延迟（Angular）

可能的解决方案1：

可能的解决方案2：

1 个答案: