Question

我看到的ng-grid的所有示例都是填充控制器端网格的示例。例如如下所示：

$scope.myData = [
                 {name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34},
                 {name: "Arbaaz",age: 11},
                 {name: "Safiya",age: 6},
                 {name: "Zane", age: 4}
                 ];
$scope.gridOptions = { data: 'myData' };

然后在HTML端将其用作

<div class="gridStyle" ng-grid="gridOptions"></div>

如何在HTML端填充网格。例如，在控制器内部，我调用一个返回员工列表的服务。然后在HTML方面我使用常规表

<table><thead></thead><tbody><tr ng-repeat = "employee in employees"</tbody></table>

如何在HTML端的网格上填充从服务调用中收到的员工数据，或者在控制器端预先填充。

Answer 1

ngGrid正在监视数据更改，因此您可以在服务之后填充$scope.myData值，以异步方式返回数据。

app.controller('MyCtrl', function($scope, $timeout) {

  // emulate async service call
  $timeout(function() {

    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
  }, 2000);


  $scope.gridOptions = {
    data: 'myData'
  };
});

Answer 2

请看这里：http://plnkr.co/edit/bVkGJpZdKBEOA0Uz16mh?p=preview

JS：

    // main.js
    var app = angular.module('myApp', ['ngGrid']);

    app.service('dataService', function() {

      var data =  [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

      function getData() {

        return data

      }

      return {

        getData: getData

      }


    })
    app.controller('MyCtrl', function($scope, dataService) {

       //get data from service
  $scope.employees = dataService.getData();

   $scope.gridOptions = { data: 'employees' };



    });

HTML侧的ng-grid填充网格

2 个答案: