Angularjs 在集合中使用 Rowspan

Angularjs using Rowspan in Collections

本文关键字：Rowspan 集合 Angularjs      更新时间：2023-09-26

我有来自JSON请求的数据集合......我想使用角度以行跨度显示......但它尚未正常工作.. 希望你能帮我解决这个问题。

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

演示普伦克

对于真正的角度解决方案，你不需要javascript来改变dom。 Angular的目标是让数据本身决定控件的呈现方式。

您是否能够更改数据结构？ 我觉得有点奇怪，你的身份证不是唯一的。 我冒昧地更改了它，以便每个订单都有一组sub_orders，其中包括名称和状态。

这是一个数据结构已更改的工作 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>

只是使用提供的数据为您的问题做出了快速而肮脏的解决方案

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

我用ng重复和排序对数据进行了排序

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

然后使用函数检查我们是否需要行跨度。

对您来说，更好的解决方案是重构数据，就像 MaskedTwilight 的解决方案所建议的那样，以便您的订单已经按订单号分组，并且您的商品是此订单的子集合。你可以减少代码和观察者。

相关文章：