html - 如何在使用 css 网格时优化大量 ng-repeats

Question

所以我想用 css 网格制作表格，其中我有 5 列和未知行数。单击第一列元素时，我还会弹出一个元素。这个弹出元素涵盖了第 2 列到第 5 列。这样做的原因是我想保持从所有可见列到第一列的滚动位置。

我的问题是，随着数据的增加，所有这些 ng-repeats 变得有点慢。有没有一种方法可以在不丢失这种列分离的情况下统一所有这些超出彼此范围的 ng-repeats？

用 ng-repeat-start/end 做这件事需要我将对象的数据元素包装到一个父元素中，但这给我留下了自动生成的行和单元格，我无法控制第一个 COLUMN 例如使其可自行滚动或设置特定高度。

(这是无法控制的)

<h1>Call List</h1>
<select>
    <option ng-repeat="list in vm.list">{{list.name}}</option>
</select>
<div class="call-list-grid" ng-init="vm.selected=false;">
    <div ng-click="vm.selected = !vm.selected" id="consumers" ng-repeat-start="list in vm.listdata">
        {{list.name}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="status">{{list.status}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="timezone">{{list.timezone}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="time">{{list.time}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="guide" ng-repeat-end>{{list.guide}}</div>

    <div ng-if="vm.selected" id="selected-consumer"></div>
</div>

这是我目前拥有的代码，我正在努力优化

<div class="container">
    <h1>Title header</h1>
    <select>
        <option ng-repeat="data in vm.data">{{list.name}}</option>
    </select>
    <div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}"
         ng-init="vm.selected=false;">
        <div id="user" ng-class="{'user-selected' : vm.selected}">
            <div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata">
               {{list.name}}
            </div>
        </div>
        <div id="status">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.status}}</div>
        </div>
        <div id="timezone">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.timezone}}</div>
        </div>
        <div id="time">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.time}}
            </div>
        </div>
        <div id="person">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.person}}
            </div>
        </div>
        <div ng-if="vm.selected" id="selected">

        </div>
    </div>
</div>

.list-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    row-gap: 2px;
    height: 77vh;
    overflow-x: hidden;

    &.consumer-selected {
        overflow: hidden;
    }
}

#user {
    grid-column-start: 1;
    grid-column-end: 2;

    // height: 100vh;
    // overflow: hidden;
    &.consumer-selected {
        overflow-y: auto;
        overflow-x: hidden;
        height: 77vh;
    }
}

#status {
    grid-column-start: 2;
    grid-column-end: 3;

    &.consumer-selected {
        display: none;
    }
}

#timzone {
    grid-column-start: 3;
    grid-column-end: 4;

    &.consumer-selected {
        display: none;
    }
}

#time {
    grid-column-start: 4;
    grid-column-end: 5;

    &.consumer-selected {
        display: none;
    }
}

#person{
    grid-column-start: 5;
    grid-column-end: 6;

    &.consumer-selected {
        display: none;
    }
}

#selected{
    background-color: rgb(177, 218, 177);
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row: 1 / 50;
    height: 77vh;
}

Answer 1

您好，您可以使用过滤器 limitTo，所以也许我不是一个更好的选择，但对您来说可能有用，所以您可以使用类似的东西。

<div class="container">
     <h1>Title header</h1>
      <select>
        <option ng-repeat="data in vm.data">{{list.name}}</option>
     </select>
    <div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}" ng- 
          init="vm.selected=false;">
        <div id="user" ng-class="{'user-selected' : vm.selected}">
            <div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata  | limitTo:quantity"> 
          {{list.name}}</div>
        </div>
        <div id="status">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}" 
       ng-repeat="list in vm.listdata  | limitTo:quantity">
                {{list.status}}</div>
        </div>
        <div id="timezone">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}" 
         ng-repeat="list in vm.listdata  | limitTo:quantity">
                {{list.timezone}}</div>
        </div>
        <div id="time">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}" 
          ng-repeat="list in vm.listdata  | limitTo:quantity">
                {{list.time}}
            </div>
        </div>
        <div id="person">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}" 
             ng-repeat="list in vm.listdata | limitTo:quantity">
                {{list.person}}
            </div>
        </div>
        <div ng-if="vm.selected" id="selected">

        </div>
       <button ng-click="getMore()">More</button>
       </div>
    </div>


//your controller 

  $scope.getMore = function(){
    $scope.quantity += 10 //or 20, 30
 }

您也可以将其与滚动一起使用。