ng-lặp lại bên trong ng-lặp lại với td cho mỗi mục - AngularJS

Question

Mã này cho tôi một bảng với các phần tử trong một cột đơn.

đây dữ liệu sẽ được như thế này

var data = [[{"id":"1","value":"One"},{"id":"2","value":"Two"},{"id":"3","value":"three"}],[{"id":"4","value":"four"},{"id":"5","value":"five"},{"id":"6","value":"six"}],[{"id":"7","value":"seven"},{"id":"8","value":"eigth"},{"id":"9","value":"nine"}]] 

<div id="mydiv"> 
    <table> 
     <tr ng-repeat="rows in data"> 
      <td ng-repeat="item in rows">{{item.id}}:{{item.value}}</td> 
     </tr> 
    </table> 
</div> 

này mang lại cho tôi một bảng với ba cột. Giống như

1:One 2:Two 3:three 
4:four 5:five 6:six 
7:seven . . . 

Cùng với điều này tôi muốn bàn với item.id trong một cột : trong một cột và item.value trong một cột để có thể đọc tốt hơn và không có trong một cột duy nhất.

Cố gắng làm điều đó nhưng không thể làm cho nó hoạt động, ai đó có thể giúp tôi với điều này?

Answer 1

Bạn nên xác định bảng của bạn theo cách này:

<div id="mydiv"> 
    <table> 
     <tr ng-repeat="rows in data"> 
      <td ng-repeat-start="item in rows">{{item.id}}</td> 
      <td>:</td> 
      <td ng-repeat-end>{{item.value}}</td> 
     </tr> 
    </table> 
</div> 

Để biết thêm thông tin xem các Special repeat start and end points section of the ngRepeat documentation:

Để lặp lại một loạt các yếu tố thay vì chỉ một yếu tố phụ huynh, ngRepeat (cũng như các chỉ thị khác) hỗ trợ mở rộng phạm vi của bộ lặp bằng cách xác định các điểm bắt đầu và kết thúc rõ ràng bằng cách sử dụng ng-repeat-start và ng-repeat-end tương ứng. Chỉ thị ng-repeat-start hoạt động giống như ng-repeat, nhưng sẽ lặp lại tất cả mã HTML (bao gồm thẻ được định nghĩa trên) cho đến và bao gồm thẻ HTML kết thúc, nơi ng-repeat-end được đặt.