Javascript Angularjs在集合中使用Rowspan

我收集了来自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>

订单号
名称
地位
A-0001
01-01
新的
01-02
新的
01-03
新的
A-0002
02-01
新的

---

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

我用ng repeat和orderBy对数据进行了排序

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

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

---

对您来说，更好的解决方案是重构数据，如MaskedTwilight的解决方案所建议的那样，这样您的订单已经按照订单号分组，并且您的项目是该订单的子集合。这就是你可以减少代码和观察者的原因。

只是利用提供的数据快速而肮脏地解决了你的问题

我用ng repeat和orderBy对数据进行了排序

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

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

---

对您来说，更好的解决方案是重构数据，如MaskedTwilight的解决方案所建议的那样，这样您的订单已经按照订单号分组，并且您的项目是该订单的子集合。这可以减少代码和观察者。

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

你能改变你的数据结构吗？我觉得有点奇怪，你的id不是唯一的。我擅自更改了它，以便每个订单都有一组子订单，其中包括名称和状态

这是一个经过修改的数据结构的工作plunker。

数据结构：

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

订单号
名称
地位
{{顺序.顺序号}
{{suborder.name}
{{suborder.status}

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

你能改变你的数据结构吗？我觉得有点奇怪，你的id不是唯一的。我擅自更改了它，以便每个订单都有一组子订单，其中包括名称和状态

这是一个经过修改的数据结构的工作plunker。

数据结构：

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

订单号
名称
地位
{{顺序.顺序号}
{{suborder.name}
{{suborder.status}

此解决方案非常简单。。这个也行。。但是如果。。。我想要订单号和状态的行跨度？。。或其他具有相同值的列进行分组。正如我所说，这是一个快速而肮脏的解决方案，并不完美，对于您的更改，您将需要重构数据作为MaskedTwilight答案。此解决方案非常简单。。这个也行。。但是如果。。。我想要订单号和状态的行跨度？。。或其他具有相同值的列进行分组。正如我所说的，这是一个快速而肮脏的解决方案，但并不完美，对于您的更改，您需要重构数据作为MaskedTwilight答案。谢谢您的解决方案。。是的，你说得对，最好重组我的数据。。我没有把我的身份证放在我的例子里。。顺便说一句，我只想用rowspan按订单对它进行分组。如果我希望状态的行跨度与订单号相同，该怎么办？有可能吗？有可能，但不会很干净。基本上，您必须使用Sonaryr的解决方案，根据状态对子订单进行排序，并使用函数确定行跨度。在我的脑海中，我想不出一个数据结构可以实现这一点。您可以进一步更改数据结构，因此它是一个包含名称的状态的订单号层次结构，但我不推荐这样做。您的数据结构将开始失去意义。感谢您的解决方案。。是的，你说得对，最好重组我的数据。。我没有把我的身份证放在我的例子里。。顺便说一句，我只想用rowspan按订单对它进行分组。如果我希望状态的行跨度与订单号相同，该怎么办？有可能吗？有可能，但不会很干净。基本上，您必须使用Sonaryr的解决方案，根据状态对子订单进行排序，并使用函数确定行跨度。在我的脑海中，我想不出一个数据结构可以实现这一点。您可以进一步更改数据结构，因此它是一个包含名称的状态的订单号层次结构，但我不推荐这样做。您的数据结构将开始失去意义。