Question

我希望数据以3 * 3矩阵显示，但只显示单行。

这是我的代码

我已经采取了一些我想在HTML中重复的虚拟数据

请提供一些解决方案。

＆＃13;

angular.module('App',[]);
angular.module('App').controller('MyCtrl',function($scope){
    $scope.groups = [{
        "id":1,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    },{
        "id":2,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    },{
        "id":3,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    }];
});

＆＃13;

<div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>&nbsp;</td>
                <th>Member</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody >
            <tr ng-repeat="group in groups">
                
             
                <td ng-repeat="member in group">{{member}}</td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

Answer 1

您需要更改

  ng-repeat="member in group"

要

 ng-repeat="member in group.members"

但是在表头上有问题，你在members中定义了包含3列的表，某些对象只包含2个数据，这可能会产生2列的行。

Answer 2

我创建了一个简单的3 * 3矩阵并用html渲染它。您可以将其作为参考。

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.title = 'Welcome varun';

  $scope.matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MyCtrl">
  <div>
    {{title}}
  </div>
  <table>
    <tr ng-repeat="row in matrix">
      <td ng-repeat="data in row">
        {{data}}
      </td>
    </tr>
  </table>
</body>

＆＃13;

Answer 3

这是一个基于代码的工作示例

＆＃13;

var app = angular.module('App',[]);
app.controller("Ctrl", ['$scope', function($scope){
    $scope.groups = [{
        "id":1,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    },{
        "id":2,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    },{
        "id":3,
        "members":[
            ["1","48","","","44"],
            ["1","48","","","44"]
        ]
    }];
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">   </script>
<div ng-app="App">
<div ng-controller="Ctrl">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Member</th>
                <th>Age1</th>
                <th>Age2</th>
                <th>Age3</th>
            </tr>
        </thead>
        <tbody >
            <tr ng-repeat="group in groups">
                
                <td>ID: {{group.id}}</td>
                <td ng-repeat="member in group.members">                [<span ng-repeat="X in member">{{X}}, </span>],</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

＆＃13;

创建3 * 3并重复它

3 个答案: