Question

我需要在角度js的手风琴里面有多个表格。我使用以下代码来做到这一点。

<uib-accordion close-others="oneAtATime">
   <uib-accordion-group ng-repeat="look_up in lookup">
     <uib-accordion-heading>
     {{look_up.name}} - {{look_up.status}} <i ng-class="{'fa fa-spinner fa-spin':look_up.status=='Loading...','fa fa-check':look_up.status=='IN SYNC','fa fa-times':look_up.status=='NOT IN SYNC'}" aria-hidden="true"></i>
      <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
     </uib-accordion-heading>
    <label for="showOnlyFailed">Show only queries that failed?</label>
    <input id="showOnlyFailed" type="checkbox" ng-model="filter.valueField5"/>
    <table ng-table="table[$index]" class="table" show-filter="true">
      <tr ng-repeat="user in $data">
        <td title="'title1'" filter="{ valueField1: 'text'}" sortable="'valueField1'">
          {{user.valueField1}}
        </td>
        <td title="'title2'" filter="{ valueField2: 'text'}" sortable="'valueField2'">
          {{user.valueField2}}
        </td>
        <td title="'title3'" filter="{ valueField3: 'text'}" sortable="'valueField3'">
          {{user.valueField3}}
        </td>
        <td title="'title4'" filter="{ valueField4: 'text'}" sortable="'valueField4'">
          {{user.valueField4}}
        </td>
        <td title="'title5'" filter="{ valueField5: 'text'}" sortable="'valueField5'">
          {{user.valueField5}}
        </td>            
        <td title="'title6'" filter="{ valueField6: 'text'}" sortable="'valueField6'">
          {{user.valueField6}}
        </td>
        <td title="'title7'" filter="{ valueField7: 'text'}" sortable="'valueField7'">
          {{user.valueField7}}
        </td>
        <td title="'title8'" filter="{ valueField8: 'text'}" sortable="'valueField8'">
          {{user.valueField8}}
        </td>
        <td title="'title9'" filter="{ valueField9: 'text'}" sortable="'valueField9'">
          {{user.valueField9}}
        </td>
        <td title="'title10'" filter="{ valueField10: 'text'}" sortable="'valueField10'">
          {{user.valueField10}}
        </td>
        <td title="'title11'" filter="{ valueField11: 'text'}" sortable="'valueField11'">
          {{user.valueField11}}
        </td>
      </tr>
    </table>    
  </uib-accordion-group>    
</uib-accordion>

浏览器在加载表之前会挂起一段时间。大约有14个表。如何优化它。请帮助。提前谢谢

Answer 1

您遇到性能问题的原因是select eid, usrid from ( select eid, usrid, row_number() over ( partition by usrid order by case when attempt = 'First' then 1 when attempt = 'Second' then 2 when attempt = 'Third' then 3 when attempt = 'Fourth' then 4 else 5 end desc ) as rn from mytable ) ranked where rn = 1;。

的实施

ng-repeat为您正在迭代的数组中的每个项创建一个新范围。因为Angular在父和子范围之间创建了2路绑定，所以最终会创建大量的监视（占用大部分加载时间）。

如果你改变＆＃34; uib-accordion＆＃34;对于自定义手风琴，你可以懒得加载每个表：

ng-repeat

PS：有很多方法可以解决这个问题。我选择最简单的实现。

AngularJS中的多个表使用重复冻结浏览器一段时间

1 个答案: