使用ng-repeat的表中矩阵的每一行

I have a matrix of json objects, I get it from the server and in the client side, I want to build a table with each row of the matrix. I don't know how to do that with angular directive ng-repeat thank u for your help

我有一个json对象矩阵,我从服务器和客户端获取它,我想构建一个矩阵的每一行的表。我不知道怎么做角度指令ng-repeat谢谢你的帮助

this is app.js

这是app.js.

 $scope.inspectionEnCoursDinspection=[];
$http.get("http://localhost:8080/projet/getInspectionEnCoursDinspection").success(function (data, status, headers, config) {

     $scope.inspectionEnCoursDinspection1=data;
})

and this is my html page

这是我的html页面

<table class="table table-bordered">
<tr ng-repeat="insp in inspectionEnCoursDinspection1 | orderBy: 'tests.length':'reverse' ">
<td>Mat{{insp.vehicule.matricule}}</td>
<td><div ng-repeat="aa in insp.tests">
Test<ul><li ng-repeat="defaut in aa.defauts">{{defaut.nomDefaut}}</li></ul>
</div>
</td>
</table

and this is one json object from the matrix

这是矩阵中的一个json对象

[{"idInspection":15,"debutInspection":null,"finInspection":null,"valide":false,"dateInspection":1462750361452,"produit":{"idProduit":1,"nomProduit":"Réinspection"},"ligne":{"idLigne":5,"description":"DES LIGNE 1","bancs":[{"idBanc":12,"description":"BANC1","ordre":1,"bancType":{"idBancType":6,"defauts":[{"idDefaut":7,"nomDefaut":"DEFAUT1"}],"description":"TYBE BANC 1"}},{"idBanc":13,"description":"BANC2","ordre":2,"bancType":{"idBancType":9,"defauts":[{"idDefaut":10,"nomDefaut":"DEFAUT4"},{"idDefaut":11,"nomDefaut":"DEFAUT5"}],"description":"TYBE BANC 2"}}],"numligne":1},"inspecteur":null,"tests":[{"idTest":16,"dureeTest":null,"testValide":false,"defauts":[{"idDefaut":7,"nomDefaut":"DEFAUT1"}]}],"termine":false,"vehicule":{"idVehicule":14,"matricule":11,"couleur":"3","carburant":"option1","modelVehicule":{"idModel":8,"marque":"MARQUE1","model":"MODEL1"}}}]

1 个解决方案

#1

So what your code does is create a table row for every insp object in the inspectionEnCoursDinspection1 array.

因此,您的代码所做的是为inspectEnCoursDinspection1数组中的每个insp对象创建一个表行。

Within that row it then makes a cell for insp.vehicule.matricule

然后在该行中为insp.vehicule.matricule创建一个单元格

It then makes another cell and fills it with a number of lists from insp.tests Each of those lists contains a number of dot points for each item in aa.

然后它创建另一个单元格并使用来自insp.tests的多个列表填充它们。每个列表都包含aa中每个项目的多个点。

So a few things here. Firstly your <tr> tag is never closed. ie you need a </tr> tab before </table>

这里有一些事情。首先,你的标签永远不会关闭。即在之前需要一个标签

Next I think you want multiple cells for each list. In which case you should have;

接下来我想你想要每个列表有多个单元格。你应该在哪种情况下;

<td ng-repeat="aa in insp.tests">Test
    <ul>
       <li ng-repeat="defaut in aa.defauts">{{defaut.nomDefaut}}</li>
    </ul>
</td>

This way you will repeat the element which is what makes the cell in a table.

这样,您将重复元素,这是使单元格成为表格的原因。

So your final code should look like this.

所以你的最终代码应该是这样的。

<table class="table table-bordered">
    <tr ng-repeat="insp in inspectionEnCoursDinspection1 | orderBy: 'tests.length':'reverse' ">
        <td>Mat{{insp.vehicule.matricule}}</td>
        <td ng-repeat="aa in insp.tests">Test
            <ul>
                <li ng-repeat="defaut in aa.defauts">{{defaut.nomDefaut}}</li>
           </ul>
        </td>
    </tr>
</table>

Edit: another issue you might be having is that in your first ng-repeat you have:

编辑:您可能遇到的另一个问题是,在您的第一次重复重复中,您有:

| orderBy: 'tests.length':'reverse' "

| orderBy:'tests.length':'reverse'“

you do not want quotes around 'reverse'. It should be:

你不想要'反向'的报价。它应该是:

<tr ng-repeat="insp in inspectionEnCoursDinspection1 | orderBy: 'tests.length':reverse "

#1