Angularjs於類別使用ROWSPAN

我有數據從JSON請求來集合..這我想用角..但它沒有正常工作..希望你可以幫我這個具有行跨度來顯示。Angularjs於類別使用ROWSPAN

$scope.data = [ 
    { 
     order_number: "A-0001", 
     name: "computer 01-01", 
     status: 'new' 
    }, 
    { 
     order_number: "A-0002", 
     name: "computer 02-01", 
     status: 'new' 
    }, 
    { 
     order_number: "A-0001", 
     name: "computer 01-02", 
     status: 'new' 
    }, 
    { 
     order_number: "A-0003", 
     name: "computer 03-01", 
     status: 'check' 
    }, 
    { 
     order_number: "A-0001", 
     name: "computer 01-03", 
     status: 'new' 
    }, 
    { 
     order_number: "A-0003", 
     name: "computer 03-02", 
     status: 'check' 
    } 

];

我希望我的收藏可以像這樣在表格中顯示。

<table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <th>Order Number</th> 
       <th>Name</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr> 
       <td rowspan="3">A-0001</td> 
       <td>01-01</td> 
       <td>new</td> 
     </tr> 
     <tr> 
       <td>01-02</td> 
       <td>new</td> 
     </tr> 
     <tr> 
       <td>01-03</td> 
       <td>new</td> 
     </tr> 
     <tr> 
       <td>A-0002</td> 
       <td>02-01</td> 
       <td>new</td> 
     </tr> 

     </tbody> 
    </table>

demo plunker

來源

2016-03-01 Anthony Pillos

對於一個真正的角的解決方案，你不應該需要JavaScript來改變DOM。 Angular的目標是讓數據本身決定如何呈現控件。

你可以改變你的數據結構？我覺得你有一些不唯一的id有點奇怪。我冒昧地修改它，以便每個訂單都有一套子訂單，其中包含名稱和狀態。

下面是具有改變數據結構的工作plunker。 http://plnkr.co/edit/lpfAJPejfVGaJqB8f6HR?p=preview

數據結構：

$scope.data = [ 
    { 
     order_number: "A-0001", 
     sub_orders: [ 
     { 
      name: "computer 01-01", 
      status: "new" 
     }, 
     { 
      name: "computer 01-02", 
      status: "new" 
     }, 
     { 
      name: "computer 01-03", 
      status: "new" 
     } 
     ] 
    }, 
    { 
     order_number: "A-0002", 
     sub_orders: [ 
     { 
      name: "computer 02-01", 
      status: "new" 
     } 
     ] 
    }, 
    { 
     order_number: "A-0003", 
     sub_orders: [ 
     { 
      name: "computer 03-01", 
      status: "new" 
     }, 
     { 
      name: "computer 03-02", 
      status: "new" 
     } 
     ] 
    } 

    ];

下面是渲染表中的角碼：

<table class="table table-bordered table-hover"> 
     <thead> 
      <tr> 
       <th>Order Number</th> 
       <th>Name</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody ng-repeat="order in data"> 
     <tr> 
      <td rowspan="{{order.sub_orders.length + 1}}">{{order.order_number}}</td> 
     </tr> 
     <tr ng-repeat="suborder in order.sub_orders"> 
      <td>{{suborder.name}}</td> 
      <td>{{suborder.status}}</td> 
     </tr> 
     </tbody> 
    </table>

來源

2016-03-01 07:56:52 MaskedTwilight

感謝您的解決方案..燁您的權利，更好地重組我的數據..和我沒有使用行跨度 –

順便把我的ID在我的例子.. bcoz我只是想通過訂單togroup它。如果我希望狀態的行數與訂單號相同，該怎麼辦？那可能嗎？ –

這是可能的，但它不會很乾淨。你基本上必須使用Sonaryr的解決方案，你可以通過狀態來訂購子訂單，並使用函數來確定行範圍。關於我的頭頂，我想不出一個可以做到這一點的數據結構。 – MaskedTwilight

使用數據提供

http://plnkr.co/edit/fvVh73sXfIRLHw42Q2XM?p=preview

我NG-重複和排序依據

ng-repeat="item in data | orderBy: 'order_number'"

下令數據只是做了一個快速和骯髒的解決您的問題

然後使用f我檢查了我們是否需要一個rowspan。

更好的解決方案是重構數據，就像MaskedTwilight的解決方案建議的那樣，這樣您的訂單就已經按照訂單號分組，並且您的物品是該訂單的子集。這可以減少代碼和觀察者。

來源

2016-03-01 07:55:46 Sonaryr

這種解決方案是非常簡單的。這一個工作太..但如果..我想爲ORDER_NUMBER和地位？有相同的值，組行跨度..或其他列... –

就像我說的，這是一個快速和骯髒的解決方案，不完美，你的改變，你需要重構你的數據作爲MaskedTwilight的答案。 – Sonaryr

Angularjs於類別使用ROWSPAN

回答

相關問題