如何设计弹出框实现左右分栏各展示50条数据，现有代码无法生成双表格

核心修改思路 #

• 基于你当前使用的Bootstrap栅格系统，将弹出框内容区划分为左右等宽的两栏，每栏占比50%
• 将原有的单个列表拆分为两个独立列表，分别绑定前半段、后半段数据
• 修正右侧列表的序号计算、删除函数的索引偏移问题，避免操作错位

调整后完整代码 #

<div class="panel-body p0">
  <!-- 左侧栏：前50条数据 -->
  <div class="col-sm-6" style="padding: 0;">
    <ul ui-sortable="sortableOptions" ng-model="itemListArray" style="list-style: none outside none; padding-inline-start: 15px;">
      <li class="featureContentBox-30" ng-style="{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }" ng-repeat="dimension in (itemListArray | limitTo: 50) track by $index">
        <div class="row p10">
          <div class="col-sm-1">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </div>
          <div class="col-sm-2">
            {{$index+1}}
          </div>
          <div class="col-sm-4">
            {{dimension.valueName}}
          </div>
          <div class="col-sm-4">{{dimension.displayName}} </div>
          <div class="col-sm-1" ng-click="removeDimension($index)"> x</div>
        </div>
      </li>
    </ul>
  </div>

  <!-- 右侧栏：后50条数据 -->
  <div class="col-sm-6" style="padding: 0;">
    <ul ui-sortable="sortableOptions" ng-model="itemListArray" style="list-style: none outside none; padding-inline-start: 15px;">
      <li class="featureContentBox-30" ng-style="{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }" ng-repeat="dimension in (itemListArray | limitTo: 50 : 50) track by $index">
        <div class="row p10">
          <div class="col-sm-1">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </div>
          <div class="col-sm-2">
            {{$index + 51}}
          </div>
          <div class="col-sm-4">
            {{dimension.valueName}}
          </div>
          <div class="col-sm-4">{{dimension.displayName}} </div>
          <div class="col-sm-1" ng-click="removeDimension($index + 50)"> x</div>
        </div>
      </li>
    </ul>
  </div>
</div>

关键改动说明 #

• 新增两个col-sm-6容器作为左右栏载体，可根据需求调整内边距、边框等样式区分两栏
• 左侧列表用(itemListArray | limitTo: 50)筛选前50条数据，序号保持1-50的逻辑不变
• 右侧列表用AngularJS内置的limitTo过滤器第二个参数指定起始索引，limitTo: 50 : 50即从数组索引50开始取50条，对应后50条数据
• 右侧列表序号调整为{{$index + 51}}，保证整体序号从1到100连续
• 右侧删除操作传入$index + 50，对齐原数组的真实索引，避免删错数据
• 如果需要适配动态总条数，可把硬编码的50替换为totalShow.count / 2，自动计算半区数据量，无需手动修改

内容的提问来源于stack exchange，提问作者Shiwangi Chandra