Question

我正在制作一张排行和排列的表格。列依赖于JSON

JSON：

     $scope.dataToShow=[

            tableHeder=["First Name","Age"],

            {
                name:"rahim",
                age:23
            },
            {
                name:"karim",
                age:24
            }
        ];

我的代码：

<table>
      <tr>
         <th>Select</th>
         <th ng-repeat="header in dataToShow.tableHeader"></th>
      </tr>
      <tr ng-repeat="row in dataToShow">
           <td>
               <input type="checkbox">
           </td>
            <td ng-repeat="item in row">{{item}}</td>
        </tr>
 </table>

我希望我的观点如下：

选择姓名年龄

复选框rahim 23

复选框karim 24

但是我得到了：

选择

复选框名称年龄

Checkbox rahim 23

Checkbox karim 24

我该如何解决？

Answer 1

试试这段代码：

 <table>
          <tr>
             <th>Select</th>
             <th>{{dataToShow.tableHeder[0]}}</th>
             <th>{{dataToShow.tableHeder[1]}}</th>
          </tr>
          <tr ng-repeat="row in dataToShow">
               <td>
                   <input type="checkbox">
               </td>
                <td >{{row.name}}</td>
                <td >{{row.age}}</td>
            </tr>
     </table>

使用$index，您可以获得循环的索引号。

Answer 2

如果JSON响应不是来自后端，请进行一些修改

<强> JSON ：

$scope.dataToShow={

        tableHeder:["First Name","Age"],

        tableData: [{
            name:"rahim",
            age:23
        },
        {
            name:"karim",
            age:24
        }]
    };

<强> HTML ：

<table>
      <tr>
         <th>Select</th>
         <th ng-repeat="header in dataToShow.tableHeader">{{header}}</th>
      </tr>
      <tr ng-repeat="row in dataToShow.tableData">
           <td>
               <input type="checkbox">
           </td>
            <td >{{row.name}}</td>
            <td >{{row.age}}</td>
        </tr>
 </table>

这肯定有效

在制作动态表时添加静态标题名称

2 个答案: