Stéphane de Luca Stéphane de Luca - 4 months ago 18
AngularJS Question

How to build 2 columns with a ng-repeat

I had built a 2-column table td from looping through a list as follows:

<style>
.columns2 {
columns: 2;
}
</style>

<tr>
<td class="columns2">
<ul>
<li ng-repeat="accident in list">
<a class="openPage" ng-click="openAccidentPage('{{accident.id}}')">
{{accident.displayName}}
</a>
</li>
</ul>
</td>
</tr>


Unfortunately, as the list is long (100 elements), the table flickers each time an element is inserted with the ng-repeat.

Is there a way to hold from recomputing the table at each repeat?

Answer

Ok. I managed to find a workaround the table flickering cause by the columns:2 and the ng-repeat.

Snippet as follows:

<div ng-init="list0 = list.splice(0,list.length/2)"></div>
<div ng-init="list1 = list"></div>

        <tr>
            <td>
                <ul>
                    <li
                        ng-repeat="accident in list0">
                        <a class="openPage" ng-click="openAccidentPage(accident.id)">
                            {{accident.displayName}}
                        </a>
                    </li>
                </ul>
            </td>
            <td>
                <ul>
                    <li
                        ng-repeat="accident in list1">
                        <a class="openPage" ng-click="openAccidentPage(accident.id)">
                            {{accident.displayName}}
                        </a>
                    </li>
                </ul>
            </td>
        </tr>