Question

我有以下

 <tbody ng-repeat="history in orderHistory">
        <tr>
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
</tbody>

似乎第二个ng-repeat不起作用，{{items.quantity}}或项目。任何事情都不会最终显示出来。

任何想法？

当我只是测试它时它会起作用

<div ng-repeat="history in orderHistory">
  <div ng-repeat="items in history.orderedItems">
    {{items.product_description}}
  </div>
</div>

但我真的需要它在表格内

我尝试了以下内容：

    <tbody>
        <tr ng-repeat="history in orderHistory">
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
     </tbody>

仍然无效

Answer 1

更新答案

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

以下内容应该让你前进。

  <table ng-controller="myCtrl">

    <tbody>
      <tr ng-repeat="history in orderHistory">
        <td>{{history.reference_code}}</td>

        <td ng-repeat-start="items in history.orderedItems">
          {{items.product_description}}<//td>

        <td ng-repeat-end>{{items.quantity}}</td>

      </tr>
    </tbody>
  </table>

老答案----- 由于评论，保留以前的答案是出于历史原因。问题是tbody - 不应该重复。我和<p>有类似问题，就像你在这里看到的那样。

这是一个小提琴http://jsfiddle.net/yogeshgadge/02y1jjau/1/，它起作用 - tbody改为div。

这是一个tbody不起作用的演示http://jsfiddle.net/yogeshgadge/2tk3u7hq/4/

Nested ng-repeat

试试这个 - 在<tr>

上移动ng-repeat

<tbody>
        <tr ng-repeat="history in orderHistory">
            <td>{{history.reference_code}}</td>
            <div ng-repeat="items in history.orderedItems">
                <td>{{items.product_description}}</td>
                <td>{{items.quantity}}</td>
            </div>
            <td>
        </tr>
</tbody>

Answer 2

这可能正常工作。

<table>
<thead>
   <tr>
      <th></th>
      <th>Claim Id</th>
      <th>Job Number</th>
      <th>Project</th>
      <th>Created On</th>
      <th>Error</th>
   </tr>
</thead>
<tbody>
   <tr ng-repeat="jobData in createJobResponseData.data">
      <td class="counterCell"></td>
      <td>{{jobData.claimId}}</td>
      <td>{{jobData.jobNumber}}</td>
      <td>{{jobData.project}}</td>
      <td>{{jobData.createdOn}}</td>
      <td >
         <div class="counterCellDiv" ng-repeat="error in jobData.errorList">
            {{error.errorMessage}}
         </div>
      </td>
   </tr>
</tbody>


   $scope.createJobResponseData = {
'status': '200',
'message': 'Request processed successfully',
'data': [
  {
    'claimId': 'data1',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'nn001',
    'project': 'pro0',
    'repairStatus': '5'
  },
  {
    'claimId': 'ASD',
    'claimLineId': '1',
    'errorList': [{
      'errorCode': ')01',
      'errorMessage': 'accidentDescription cannot be blank'
    }, {
      'errorCode': '(01)',
      'errorMessage': 'abcd cannot be blank'
    }],
    'insertedIntoDb': true,
    'jobNumber': '',
    'project': 'asd',
    'repairStatus': '5'
  },
  {
    'claimId': 'oiqweo',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'qoweiu',
    'project': 'asq',
    'repairStatus': '5'
  },
  {
    'claimId': 'SDDDASD',
    'claimLineId': '1',
    'errorList': null,
    'insertedIntoDb': true,
    'jobNumber': 'asdqio',
    'project': 'kalsdjjk',
    'repairStatus': '5'
  }
]

}

ng-repeat内部的角度ng-repeat在表格中不起作用

2 个答案: