ng-repeat-start with ng-hide

Question

Just simple example.

My array:

$scope.arr = [
    {lab1: 'a1', lab2: 'a2', lab3: 'a3', val1: 'av1', val2: 'av2', val3: 'av3'},
    {lab1: 'b1', lab2: 'b2', lab3: 'b3', val1: 'bv1', val2: 'bv2', val3: 'bv3'},
    {lab1: 'c1', lab2: 'c2', lab3: 'c3', val1: 'cv1', val2: 'cv2', val3: 'cv3'},
    {lab1: 'd1', lab2: 'd2', lab3: 'd3', val1: 'dv1', val2: 'dv2', val3: 'dv3'},
    {lab1: 'e1', lab2: 'e2', lab3: 'e3', val1: 'ev1', val2: 'ev2', val3: 'ev3'},
];

My html:

<table>
    <thead>
    <tr>
        <th>Title1</th>
        <th ng-repeat-start="item in arr" ng-hide="item.val1 == 'cv1'">{{item.lab1}}</th>
        <th>{{item.lab2}}</th>
        <th ng-repeat-end>{{item.lab3}}</th>
        <th>Title2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Val1</td>
        <td ng-repeat-start="item in arr" ng-hide="item.val1 == 'cv1'">{{item.val1}}</td>
        <td>{{item.val2}}</td>
        <td ng-repeat-end>{{item.val3}}</td>
        <td>Val2</td>
    </tr>
    </tbody>
</table>

Expected table:

Title1 | a1 | a2 | a3 | b1 | b2 | b3 | d1 | d2 | d3 | e1 | e2 | e3 | Title2

Val1| av1 | av2 | av3 | bv1 | bv2 | bv3 | dv1 | dv2 | dv3 | ev1 | ev2 | ev3 | Val2

Real table:

Title1 | a1 | a2 | a3 | b1 | b2 | b3 | c2 | c3 | d1 | d2 | d3 | e1 | e2 | e3 | Title2

Val1| av1 | av2 | av3 | bv1 | bv2 | bv3 | cv2 | cv3 | dv1 | dv2 | dv3 | ev1 | ev2 | ev3 | Val2

So how can i apply ng-hide or other directives on all ng-repeat-start end blocks? And no - i cant wrap it and use ng-repeat, no - i dont want use a filter...

Answer 1

So the only thing i found is to add ng-hide to all blocks in repeat:

<table>
    <thead>
    <tr>
        <th>Title1</th>
        <th ng-repeat-start="item in arr" ng-hide="item.val1 == 'cv1'">{{item.lab1}}</th>
        <th ng-hide="item.val1 == 'cv1'">{{item.lab2}}</th>
        <th ng-repeat-end ng-hide="item.val1 == 'cv1'">{{item.lab3}}</th>
        <th>Title2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Val1</td>
        <td ng-repeat-start="item in arr" ng-hide="item.val1 == 'cv1'">{{item.val1}}</td>
        <td ng-hide="item.val1 == 'cv1'">{{item.val2}}</td>
        <td ng-repeat-end ng-hide="item.val1 == 'cv1'">{{item.val3}}</td>
        <td>Val2</td>
    </tr>
    </tbody>
</table>

But it is very ugly, because it is code duplication, and can be used only for not so many repeated blocks..

Just will waiting better answer some time.

Answer 2

Why do you have to use ng-repeat-start? It works with just one ng-repeat:

 <div ng-repeat="item in arr" ng-hide="item.val == 0">{{item.lab}}{{item.val}}</div>