javascript - Angular 和 HTML : Programatically create HTML table rows based number of items in an Angular $scope var

Question

目前我正在使用 Angular 来填充 HTML 表中的数据。现在，我正在手动编码每一行以进行显示，但是，我正在寻找一种解决方案来以编程方式定义每个 html 行。下面的 Angular Controller 得到了简化，因为我使用 for 循环来填充多行数据。

是否有一个编程 html 解决方案来定义这些行中的每一行？

HTML

 <tr>
    <td>{{oneCategory}}</td>
    <td>{{oneDesc}}</td>
    <td>{{oneNote}}</td>
    <td ng-repeat="rowOne in one">{{ rowOne.value }}</td>
 </tr>
 <tr>
    <td>{{twoCategory}}</td>
    <td>{{twoDesc}}</td>
    <td>{{twoNote}}</td>
    <td ng-repeat="rowTwo in two">{{ rowTwo.value }}</td>
 </tr>
 <tr>
    <td>{{threeCategory}}</td>
    <td>{{threeDesc}}</td>
    <td>{{threeNote}}</td>
    <td ng-repeat="rowThree in three">{{ rowThree.value }}
 </td>
 </tr>

Angular Controller

 var row2wordOBJ = {0: 'one', 1: 'two', 2:'three', 3: 'four', 4:'five', 
 5:'six', 6:'seven', 7:'eight', 8:'nine', 9:'ten', 10:'eleven', 11:'twelve'}

 var objKeys_responseData = Object.keys(response.data)
 // outer loop controls the object key pointer                                                                                                                                      
 for(a=0; a < objKeys_responseData.length; a++){
 var objKey = objKeys_responseData[a]
     for(b=0; b < response.data[objKey_responseData].length; b++){
         var row = row2wordOBJ[b]
         $scope[row + 'Category'] = response.data[objKey][b].category
         $scope[row + 'Desc'] = response.data[objKey][b].desc
         $scope[row + 'Note'] = response.data[objKey][b].note
         $scope[row] = response.data[objKey][b].value
      }
  }

编辑

第二个解决方案也由 Nitin Walia 提供。最终的逻辑将取决于您需要如何控制 html 表数据的显示。两个答案都会起作用。

Angular Controller

$scope.item1 = response.data[key1]
$scope.item2 = response.data[key2]

HTML

<tr ng-repeat="data in item1">
    <td>{{data.category}}</td>
    <td>{{data.oneDesc}}</td>
    <td>{{data.note}}</td>
    <td ng-repeat="val in data.value">{{ val.value }}</td>
</tr>
<tr ng-repeat="data in item2">
    <td>{{data.category}}</td>
    <td>{{data.oneDesc}}</td>
    <td>{{data.note}}</td>
    <td ng-repeat="val in data.value">{{ val.value }}</td>
</tr>

Answer 1

尝试 ng-repeat

Angular

$scope.item =[];
   for(b=0; b < response.data[objKey_responseData].length; b++){
     $scope.item[b].category  = response.data[objKey][b].category
     $scope.item[b].Desc = response.data[objKey][b].desc
     $scope.item[b].Note = response.data[objKey][b].note
     $scope.item[b].value = response.data[objKey][b].value
  }

/////////////////// HTML

<tr ng-repeat="data in item">
    <td>{{data.category}}</td>
    <td>{{data.oneDesc}}</td>
    <td>{{data.note}}</td>
    <td ng-repeat="val in data.value">{{ val.value }}</td>
 </tr>

编辑以修复未定义的错误，执行此操作..

$scope.item =[];
   for(b=0; b < response.data[objKey_responseData].length; b++){
     var itemObj = {
       'category'  : response.data[objKey][b].category,
       'desc' :response.data[objKey][b].desc,
       'Note' : response.data[objKey][b].note,
       'value': response.data[objKey][b].value
     }
     $scope.item.push(itemObj);
  }