解釋如何創建此表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

回答

相關問題