Angularjs:两个ng-repeats没有在表列中显示正确的信息

时间:2018-02-21 13:49:44

标签: arrays angularjs html-table row multiple-columns

我正在尝试创建一个可以保存不同列数的搜索结果的动态表。

我创建了一个表,每个条目都应该有一行,每个数据字段都有一列用ng-repeat -functions填充,但由于某种原因,它根本不显示列中的任何信息,尽管它确实创造了正确的数量。

如果我尝试在e中显示{{}},则会显示存在的正确密钥。如果我在i中尝试使用{{}},则会在每列中显示以下内容(所有列的信息相同,但每行的信息不同):

{"etunimi":"firstname","sukunimi":"lastname","optunnus":"010101010101011001"}

这是html:

<table id="raporttiTulos" class="resultTable">
        <tr ng-repeat="i in raportointiLista">
                <td ng-repeat=" e in raportointiAvaimet">{{i.e}}</td>
        </tr>
</table>

以下是负责传入数据的函数:

    $scope.haeMaksut = function(){
            $scope.raportointiAvaimet = {};
            $http.post('/maksuhaku')
             .then(function(res){
                    x = 0;
                    $scope.raportointiLista = res.data.message;
                    for(i in $scope.raportointiLista[0]){
                            $scope.raportointiAvaimet[x] = i;
                    x+=1
                    }
                    console.log($scope.raportointiAvaimet);
                    $scope.maksamattomat = $scope.raportointiLista.length;
                    $scope.lataus = true;
            }, function(error){
                    console.log(error);
            });
    }

密钥列表如下所示:

Object [ "etunimi", "sukunimi", "optunnus" ]

以下是数据列表中的一些行:

[…]
  [0…99]
    0: Object { etunimi: "firstname", sukunimi: "lastname", optunnus: "101010101010101010", … }

1 个答案:

答案 0 :(得分:0)

而不是这样做,你可以直接访问对象键。

HTML

<tr ng-repeat="i in raportointiLista">
    <td ng-repeat="key in raportointiAvaimet">{{i[key]}}</td>
</tr>

控制器

$scope.haeMaksut = function () {
    $scope.raportointiAvaimet = {};
    $http.post('/maksuhaku')
        .then(function (res) {
            $scope.raportointiLista = res.data.message;
            $scope.raportointiAvaimet = Object.keys($scope.raportointiLista[0]);
        }, function (error) {
            console.log(error);
        });
}