Question

我想使用带有以下数据和预期输出格式的角度js在HTML中打印表格。你能帮我解决一下吗？

以下是我需要的输出

<table ng-app="testApp" ng-controller="testController">
 <tr ng-repeat-start="test in testData">
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td>

    <td>{{ test.data[0] }}</td>
</tr>


<tr ng-repeat-end ng-repeat="value in test.data.slice(1)">
        <td>{{ value }}</td>
    </tr>

angular.module('testApp',[])
.controller('testController',function($scope){
    $scope.testData=[{
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
        "story ": "Update ",
        "component ": "Component 1"
    }, {
        "story ": "Update 2 ",
        "component ": "Component 2"
    }]


}, {
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
        "story ": "Update",
        "component ": "Component 3 "
    }, {
        "story ": "Update 2 ",
        "component ": "Component 2"
    }]
}];
});

Answer 1

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
  $scope.testData = [{
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
      story: "story1 ",
      component: "Component 1"
    }, {
      story: "story2 ",
      component: "Component 2"
    }]
  }, {
    timeline: "2017 - 05 - 23 T10: 09: 06.896 Z ",
    data: [{
      story: "story1",
      component: "Component 3 "
    }, {
      story: "story2 ",
      component: "Component 2"
    }]
  }];
});

table, th, td {
    border: 1px solid black;
    padding:1px
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="myTable">
    <tr>
      <th><b>TimeLine</b></th>
      <th><b>Story</b></th>
      <th><b>Component</b></th>
    </tr>
    <tr ng-repeat="test in testData">
      <td>{{ test.timeline }}</td>
      <td>
        <table>
          <tr ng-repeat="value in test.data">
            <td> {{ value.story }}</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr ng-repeat="value in test.data">
            <td>{{ value.component }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Answer 2

你的HTML中的

试试这个

<table ng-app="testApp" ng-controller="testController">
 <tr ng-repeat="test in testData">
    <td rowspan="{{ test.data.length }}">{{ test.timeline }}</td>

    <td ng-repeat="value in test.data">
     {{ value.story }}</td>
      <td ng-repeat="value in test.data">
     {{ value.component }}</td>
</tr>
    </table>

Answer 3

＆＃13;

angular.module('testApp',[])
.controller('testController',function($scope){
    $scope.testData=[{
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z",
      data: [{
          "story": "Update",
          "component": "Component 1"
          }, {
          "story": "Update 2 ",
          "component": "Component 2"
          }]
      }, {
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z",
      data: [{
          "story": "Update",
          "component": "Component 3"
      },{
          "story": "Update 2 ",
          "component": "Component 2"
      }]
  }];
});

＆＃13;

table, th, td {
    border: 1px solid black;
}
.no-border table {
    border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
<table>
 <tr>
  <td>TimeLine</td>
  <td>Story</td>
  <td>Component</td>
 </tr>
 <tr ng-repeat="test in testData">
    <td>{{ test.timeline }}</td>
    <td class="no-border">
    <table>
    <tr ng-repeat="item in test.data">
      <td>{{ item.story }}</td>
    </tr>
    </table>
    </td>
    <td class="no-border">
    <table>
    <tr ng-repeat="item in test.data">
      <td>{{ item.component }}</td>
    </tr>
    </table>
    </td>
   
 </tr>
</table>
</div>

＆＃13;

Answer 4

你可以使用这个，根据你的要求格式化你的表格。你正在错误地写对象只是纠正你的对象

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in records">

<td>
{{x.timeline}}
</td>

<td>

<table>
<tr ng-repeat="y in x.data">

<td>{{y.story}}</td>
<td>{{y.component}}</td>

</tr>

</table>

</td>

</tr>

</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [{
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    "data": [{
        "story": "Update ",
        "component": "Component 1"
    }, {
        "story": "Update 2 ",
        "component": "Component 2"
    }]


}, {
    "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
    "data": [{
        "story": "Update",
        "component": "Component 3 "
    }, {
        "story": "Update 2 ",
        "component": "Component 2"
    }]
}];
});
</script>

</body>
</html>

这是此代码的输出

Answer 5

试试这个

       <table>
         <tr ng-repeat="test in testData">
              <td>{{ test.timeline }}</td>
              <td>
                <div ng-repeat="value in test.data">
                   {{value.story}}
               </div>
             </td>
        </tr>
       </table>

检查plunker https://plnkr.co/edit/gx3IaFtUSJiLRS5jutqp?p=preview

中的结果

Answer 6

对于预期输出您需要编写类似

的HTML

angular.module('testApp', [])
  .controller('testController', function($scope) {
    $scope.testData = [{
      "timeline": "2017 - 04 - 23 T10: 09: 06.896 Z ",
      "data": [{
          "story": "Update 1",
          "component": "Component 1"
        },
        {
          "story": "Update 2 ",
          "component": "Component 2"
        }
      ]
    }, {
      "timeline": "2017 - 05 - 23 T10: 09: 06.896 Z ",
      "data": [{
          "story": "Update 3",
          "component": "Component 3 "
        },
        {
          "story": "Update 4 ",
          "component": "Component 2"
        }
      ]
    }];
  });

td,
th {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table ng-app="testApp" ng-controller="testController" style="border:1px solid black">
  <thead>
    <tr>
      <th>Timeline</th>
      <th>Story</th>
      <th>Component</th>
    </tr>
  </thead>
  <tbody ng-repeat="test in testData">
    <tr ng-repeat="data in test.data">
      <td rowspan="{{test.data.length}}" ng-hide="$index>0">
        {{test.timeline}}
      </td>
      <td>{{data.story}}</td>
      <td>{{data.component}}</td>
    </tr>
  </tbody>
</table>

Angular js ng-repeat用于嵌套的json值

6 个答案: