【问题标题】:Angular ng-repeat in table表格中的角度 ng-repeat
【发布时间】:2015-06-13 11:33:48
【问题描述】:

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

这是我的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(',');
        }

});

这里是一个例子:http://plnkr.co/edit/jWqyePLEvrnwFZOkFUUn

但它应该看起来像:

我怎样才能做到这一点?

【问题讨论】:

    标签: angularjs html-table angularjs-ng-repeat


    【解决方案1】:

    这里有很多不必要的东西。我把它们砍掉了。你根本不需要 trZeile。此外,这一行只是将同一个变量重新绑定了 3 次:

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

    这是工作代码: 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(','));
        }
    });
    

    【讨论】:

    • 谢谢迈克,这就是我要找的!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-02-11
    • 1970-01-01
    • 2015-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多