表格中的角度ng重复 [英] Angular ng-repeat in table

问题描述

我有一个关于角度'ng-repeat'的问题。我有一个表，在这个表中我将显示数组值。

这是我的js：

  var app = angular.module （'plunker'，[]）; 
 
 
 app.controller（'MainCtrl'，函数（$ scope）{
 
<！ -  TR  - > 
 $范围.trZeile = new Array（）; 
 $ scope.trZeile = ['1'，'2'，'3']; 
 
 
 $ scope.hadi = new Array （）; 
 $ scope.hadia = new Array（）; 
 $ scope.hadi [0] ='Mercedes1，BMW1，Ford1，VW1，Renault1，Kia1'; 
 $范围。 hadi [1] ='Mercedes2，BMW2，Ford2，VW2，Renault2，Kia2'; 
 $ scope.hadi [2] ='Mercedes3，BMW3，Ford3，VW3，Renault3，Kia3'; 
 
 for（var i = 0; i< 3; i ++）{
 $ scope.hadia = $ scope.hadi [i] .split（'，'）; 
} 
 
}）; 
  

以下是一个例子：

HTML

 < table ng-controller =MainCtrlstyle ='border：2px solid black' > 
< tr ng-repeat =在hadia中排style ='border：2px solid black'> 
< th scope =row> {{$ index + 1}}< / th> 
< td ng-repeat =td在行轨道中由$ indexstyle ='border：2px solid black'> 
 {{td}} 
< / td> 
< / tr> 
< / table> 
  

Javascript

  var app = angular.module（'plunker'，[]）; 
 app.controller（'MainCtrl'，函数（$ scope）{
 $ scope.hadia = []; 
 $ scope.hadi = [
'Mercedes1，BMW1，Ford1 ，VW1，Renault1，Kia1'，
'Mercedes2，BMW2，Ford2，VW2，Renault2，Kia2'，
'Mercedes3，BMW3，Ford3，VW3，Renault3，Kia3'
] 
 
 for（var i = 0，j = $ scope.hadi.length; i< j; i ++）{
 $ scope.hadia.push（$ scope.hadi [i] .split（ '，'））; 
} 
}）; 
  

I've a question about angular 'ng-repeat'. I have a table, and in this table I will show the array values.

Here is my js:

var app = angular.module('plunker', []);


app.controller('MainCtrl',function($scope){

        <!--TR-->
        $scope.trZeile = new Array();
        $scope.trZeile = ['1','2','3'];


        $scope.hadi = new Array();
        $scope.hadia = new Array();
        $scope.hadi[0] = 'Mercedes1,BMW1,Ford1,VW1,Renault1,Kia1';
        $scope.hadi[1] = 'Mercedes2,BMW2,Ford2,VW2,Renault2,Kia2';
        $scope.hadi[2] = 'Mercedes3,BMW3,Ford3,VW3,Renault3,Kia3';

        for(var i = 0; i<3; i++){
            $scope.hadia = $scope.hadi[i].split(',');
        }

});

Here is an example: http://plnkr.co/edit/jWqyePLEvrnwFZOkFUUn

But it should looks like:

How can I achieve that?

解决方案

You have a lot of unnecessary things here. I chopped them out. You don't need trZeile at all. Also, this line was simply rebinding the same variable three times:

$scope.hadia = $scope.hadi[i].split(',');

Here's the working code: http://plnkr.co/edit/zz04pEDPst5Yo3thCXfy?p=preview

HTML

<table ng-controller="MainCtrl" style='border:2px solid black'>
    <tr ng-repeat="row in hadia" style='border:2px solid black'>
       <th scope="row">{{$index + 1}}</th>
         <td ng-repeat="td in row track by $index" style='border:2px solid black'>
             {{td}}
          </td>
     </tr>
</table>

Javascript

var app = angular.module('plunker', []);
app.controller('MainCtrl',function($scope){
    $scope.hadia = [];
    $scope.hadi = [
       'Mercedes1,BMW1,Ford1,VW1,Renault1,Kia1',
       'Mercedes2,BMW2,Ford2,VW2,Renault2,Kia2',
       'Mercedes3,BMW3,Ford3,VW3,Renault3,Kia3'
    ]

    for(var i = 0, j = $scope.hadi.length; i< j; i++){
        $scope.hadia.push($scope.hadi[i].split(','));
    }
});

这篇关于表格中的角度ng重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！