Question

我有来自JSON请求的数据集合..我希望使用angular ..显示行间距但是它还没有正常工作..希望你能帮助我。

$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

Answer 1

对于真正的角度解决方案，您不需要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>

Answer 2

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

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

我用ng-repeat和orderBy

订购数据

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

然后使用我检查的函数，如果我们需要一个rowspan。

更好的解决方案是重构数据，例如MaskedTwilight的解决方案建议，以便您的订单已按订单编号分组，并且您的商品是此订单的子集合。你可以减少代码和观察者。

Angularjs在集合中使用Rowspan

2 个答案: