ng-repeat-以ng-hide開始

Question

只是簡單的例子。

我的數組：

$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'},
];

我的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>

預期表：

標題1 | a1 | a2 | a3 | b1 | b2 | b3 | d1 | d2 | d3 | e1 | e2 | e3 | 標題2

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

實表：

標題1 | a1 | a2 | a3 | b1 | b2 | b3 | c2 | c3 | d1 | d2 | d3 | e1 | e2 | e3 | 標題2

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

那么如何在所有ng-repeat-start結束塊上應用ng-hide或其他指令？ 而且-我無法將其包裝並使用ng-repeat，不-我不想使用過濾器...

Answer 1

所以我發現的唯一一件事就是將ng-hide重復添加到所有塊中：

<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>

但這很丑陋，因為它是代碼重復，並且只能用於很少的重復塊。

請稍等片刻。

Answer 2

為什么必須使用ng-repeat-start？ 它僅適用於一個ng-repeat：

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