AngularJS的ng-repeat-start ng-repeat-end与表和rowspan

AngularJS ng-repeat-start ng-repeat-end with table and rowspan

本文关键字：rowspan ng-repeat-end ng-repeat-start AngularJS      更新时间：2023-09-26

我面临的问题，而使动态表与动态行span。我的json是一个对象数组。元素对象也是数组。元素数组应该作为动态rowspan的编号出现。我有一个json，像:

{
  "roleTypes": [
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [
        {
          "rateType": {
            "name": "new Rate"
          },
          "hourlyRate": {
            "value": 1222
          },
          "internalRate": {
            "value": 433
          }
        },
        {
          "rateType": {
            "name": "myRate"
          },
          "hourlyRate": {
            "value": 1350
          },
          "internalRate": {
            "value": 1650
          }
        }
      ]
    },
    {
      "roleType": {
        "name": "AngularJs Developer"
      }
    }
  ]
}

如果我想使用ng-repeat-start和ng-repeat-end，并创建如下表结构:

roleType------      | rateType-----hourlyRate--------internalRate
---------------------------------------------------------------------------
                    | new Rate      1222                433
                    ---------------------------------------------------
SOA Role            | myRate        1350                1650
---------------------------------------------------------------------------
                    | new Rate      1222                 433
                    ---------------------------------------------------
AngularJs Developer |myRate         1350                 1650
---------------------------------------------------------------------------

我正在努力获得动态行span。请查看是否有人可以帮助。

Pankaj提到的是正确的，但我认为你需要一个更动态的rowspan表。你可以像下面的例子那样做:

var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
  $scope.data = {
    "roleTypes": [{
      "roleType": {
        "name": "SOA Role"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 1222
        },
        "internalRate": {
          "value": 433
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 1350
        },
        "internalRate": {
          "value": 1650
        }
      }]
    }, {
      "roleType": {
        "name": "AngularJs Developer"
      },
      "rates": [{
        "rateType": {
          "name": "new Rate"
        },
        "hourlyRate": {
          "value": 123
        },
        "internalRate": {
          "value": 1431
        }
      }, {
        "rateType": {
          "name": "myRate"
        },
        "hourlyRate": {
          "value": 443
        },
        "internalRate": {
          "value": 1930
        }
      }, {
        "rateType": {
          "name": "otherRate"
        },
        "hourlyRate": {
          "value": 343
        },
        "internalRate": {
          "value": 2000
        }
      }]
    }]
  };
});
td[rowspan] {
  vertical-align: middle !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-controller="FooController">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>roleType</th>
        <th>rateType</th>
        <th>hourlyRate</th>
        <th>internalRate</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="role in data.roleTypes">
        <td rowspan="{{role.rates.length}}">{{role.roleType.name}}</td>
        <!-- Display the first rate in the same "tr" -->
        <td>{{role.rates[0].rateType.name}}</td>
        <td>{{role.rates[0].hourlyRate.value}}</td>
        <td>{{role.rates[0].internalRate.value}}</td>
      </tr>
      
      <!-- Now display the other rates in different "tr" excluding first -->
      <!-- You can also make a subarray from here excluding the 1st rate -->
      <tr ng-repeat="rate in role.rates" ng-if="!$first" ng-repeat-end>
        <td>
          {{rate.rateType.name}}
        </td>
        <td>
          {{rate.hourlyRate.value}}
        </td>
        <td>
          {{rate.internalRate.value}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

你可以像下面这样用ng-repeat除以tbody 

<table>
  <tbody ng-repeat="role in roleTypes.roleTypes">
    <tr ng-repeat="rate in role.rates">
      <td ng-if="$first" rowspan="2">{{role.roleType.name}}</td>
      <td>{{rate.rateType.name}}</td>
      <td>{{rate.hourlyRate.value}}</td>
      <td>{{rate.internalRate.value}}</td>
      <tr>
  </tbody>
</table>

Plunkr

相关文章：