解释如何创建此表angularjs

我在某处搜索并找到了我需要的代码。我工作并想知道如何使用angularjs生成此表。我的意思是我不了解这个过程。我很困惑这个tdCells[primaryarray][tdCells[primaryarray].length] = i+1 ;它是干什么用有人可以帮助我弄清楚解释如何创建此表angularjs

var app = angular.module("myApp", []); 
 
app.controller('check', function($scope) { 
 
    $scope.totalSeats = 20; 
 
    $scope.seatArr = []; 
 
    for (var i = 1; i <= $scope.totalSeats; i++) { 
 
    $scope.seatArr.push(i); 
 
    } 
 

 
    console.log($scope.seatsArr); 
 

 
    $scope.myData = [{ 
 
    seatno: '1', 
 
    name: 'Melanie', 
 
    ticketnNo: "abc456", 
 
    insuranceNo: 34 
 
    }, { 
 
    seatno: '2', 
 
    name: 'JOsefa', 
 
    ticketnNo: "abc231", 
 
    insuranceNo: 90 
 
    }, { 
 
    seatno: '17', 
 
    name: 'Luna Marie', 
 
    ticketnNo: "abc324", 
 
    insuranceNo: 35 
 
    }, { 
 
    seatno: '5', 
 
    name: 'Jana', 
 
    ticketnNo: "abc221", 
 
    insuranceNo: 91 
 
    }, { 
 
    seatno: '18', 
 
    name: 'Scott Tooker', 
 
    ticketnNo: "abc453", 
 
    insuranceNo: 36 
 
    }, { 
 
    seatno: '6', 
 
    name: 'Malanies Santos', 
 
    ticketnNo: "abc241", 
 
    insuranceNo: 93 
 
    }, { 
 
    seatno: '20', 
 
    name: 'Luna Marie Landiola', 
 
    ticketnNo: "abc322", 
 
    insuranceNo: 39 
 
    }, { 
 
    seatno: '6', 
 
    name: 'Eliza', 
 
    ticketnNo: "abc222", 
 
    insuranceNo: 92 
 
    } ]; 
 
    
 
    $scope.getName = function(number){ 
 
     console.log(number); 
 
     for(var i=0;i<$scope.myData.length;i++){ 
 
      if(number == $scope.myData[i].seatno) 
 
       return $scope.myData[i].name; 
 
     } 
 
     return ''; 
 
    }; 
 
    var tdCells = []; 
 
    var primaryarray=-1; 
 
    for(var i=0;i<$scope.totalSeats;i++){ 
 
    if(i%3 ===0){ 
 
     ++primaryarray;   
 
     tdCells[primaryarray] = []; 
 
    } 
 
    
 
    tdCells[primaryarray][tdCells[primaryarray].length] = i+1 ;   
 
      tdCells[primaryarray][tdCells[primaryarray].length] = 
 
     $scope.getName(i+1);     
 
    } 
 
    $scope.rows = tdCells; 
 
    console.log($scope.rows); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="check"> 
 
    <table border="1" width="100%"> 
 
    <colgroup span="7"></colgroup> 
 
    <tbody> 
 
     <tr ng-repeat="tr in rows"> 
 
     <td ng-repeat="td in tr"> 
 
      {{ td }} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </body>

来源

2015-02-06 Lee Lee

http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/ – 2015-02-06 09:42:29

tdCells是一个数组数组。每个最后的单元格都会得到基于0的计数器+1，使其成为1，然后新的最后一个单元格将获得一个基于名称的名称 – mplungjan 2015-02-06 09:44:36

在你的代码中，$scope.getName(number)功能很简单，它从您的数据阵列基于获取名称座位号。

以后的for循环有点棘手。它所做的，我认为是： -

它创建了一个两个Diamentional阵列tdCells有三列（if(i%3===0)）
对于这个二维数组每一行tdCells： -
- 它的第一个元素设置为seatnumber tdCells[primaryarray][tdCells[primaryarray].length] = i+1 ;
- 它将第二个元素设置为使用上面的函数$scope.getName(...)检索的名称。 tdCells[primaryarray][tdCells[primaryarray].length] = $scope.getName(i+1);

在NG-重复它简单地呈现在标准列2D阵列 - 只是各列变得seatnumber加上名称的对联。

HTH！

来源

2015-02-06 09:58:23 amitthk

解释如何创建此表angularjs

回答

相关问题