如何使用ng-repeat在html頁面中動態創建多個ui網格？

Question

我使用的是NG重複循環中我的HTML頁面這樣

<li class="list-group-item" ng-repeat="obj in Students"> 
    <div class="grid" id="{{'grid'+$index}}" ui-grid="{{'griddata'+$index}}" 
     ui-grid-selection ui-grid-pagination> 
    </div> 
</li> 

這裏是我的腳本來創建UI電網動態

$scope.CreateGrids = function() { 
    debugger; 
    for (var count = 0; count < $scope.StudentList.length; count++) { 

     var studentData = "griddata"+count; 

     $scope[studentData] = []; 

     // defining the grid control 
     $scope[studentData] = { 
      enableRowSelection: false, 
      //grid pagination 
      paginationPageSizes: [10, 25, 50, 75], 
      paginationPageSize: 10, 
      enableSorting: true, 
      //enabling filtering 
      enableFiltering: false, 
      multiSelect: false, 

      //column definations  
      columnDefs: [ 
       { name: 'SubjectID', displayName: 'SubjectID', visible: false }, 
       { name: 'SubjectName', displayName: 'Subject Name' }, 
       { name: 'MarksObtained', displayName: 'Marks' }, 
       ]      
     }; 

      $scope[studentData].data = $scope.StudentList[count].Student; 
    } 
}; 

但如此多的命中和試用後，我無法創建網格。 我該如何實現它？ 在此先感謝。

Answer 1

這裏是解決方案請plunkr link

HTML代碼

<li class="list-group-item" ng-repeat="obj in data"> 
     <div class="grid" id="{{'grid'+$index}}" ui-grid="{data:data['griddata'+$index].columnDefs}" 
      ui-grid-selection ui-grid-pagination> 
     </div> 
    </li> 
    </ 

JS代碼

$scope.StudentList = [1, 2, 3, 4, 5]; 
    $scope.data = {}; 
    $scope.CreateGrids = function() { 
     for (var count = 0; count < $scope.StudentList.length; count++) { 
     var studentData = "griddata" + count; 
     $scope.data[studentData] = []; 
     // defining the grid control 
     $scope.data[studentData] = { 
      enableRowSelection: false, 
      //grid pagination 
      paginationPageSizes: [10, 25, 50, 75], 
      paginationPageSize: 10, 
      enableSorting: true, 
      //enabling filtering 
      enableFiltering: false, 
      multiSelect: false, 
      //column definations  
      columnDefs: [{ 
      name: 'SubjectID', 
      displayName: 'SubjectID', 
      visible: false 
      }, { 
      name: 'SubjectName', 
      displayName: 'Subject Name' 
      }, { 
      name: 'MarksObtained', 
      displayName: 'Marks' 
      }, ] 
     }; 
     $scope.data[studentData].data = $scope.StudentList[count].Student; 
     } 
    }; 

    $scope.CreateGrids(); 

希望這將幫助你