Question

我在我的html页面中使用了ng-repeat循环，如下所示

<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();

希望这会对你有所帮助

如何在html页面中使用ng-repeat动态创建多个ui网格？

1 个答案: