Question

我尝试通过die ui-grid（v3.0.0-rc.20-8199eb5）字段函数方法使用$ http进行休息调用。见下面的例子。

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
        ],
        data : [      {
                           "name": "Rex",
                           "getDepartment" : function() {return deparmentService.findByName(this.name);}
                       }
                   ]
      };

}]);

浏览器进入无限循环。 departmentService $ http调用依赖于传递给它的名称参数start。

如何在加载行时从ui-grid内部进行$ http ajax调用？

Answer 1

为什么不获取数据，然后填充所有部门，然后将其提供给网格？

或者，获取数据，将其提供给网格，然后在后台运行一个获取所有部门并将其填入数据的迭代器。

每次呈现行时，您都不希望网格调用http服务 - 每次滚动时它都会重新呈现行。（不是很多，但是很多事件和一些卷轴）

所以你最终得到了：

$scope.getDepartment = function(name) {
  return departmentService.findByName(name);
};

$scope.data = [
  name: 'Rex'
];

$scope.gridOptions = {
  enableSorting: true,
  columnDefs: [
    { name:'name', field: 'name' },
    { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
  ],
  data: 'data'
};

// I'm imagining here that getDepartment is expensive
// so you may want to do this in batches or something
// but this illustrates that it's out of band - after the grid renders
$timeout( function() {
  $scope.data.forEach(function(row) {
    row.getDepartment = $scope.getDepartment(row.name);
  });
}, 100);

Answer 2

尝试在单独的文件中使用服务。这有助于您整理代码。

app.factory('yService', ['$http', 'sessionService', function ($http, sessionService) {
    return {
        GetNames: function () {
            return $http({
                method: "get",
                url: "/api/Common/GetNames"
             });
        }
    }
}]);

从你的控制器，请拨打以下内容，

    yService.GetNames().success(function (data) {
                // copy your data to one object
//$scope.departments
            }).
                error(function (data) {

                });

在ng-init上调用上面的yservice.GetNames并执行以下操作，

$scope.departments={};
    $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name:'name', field: 'name' },
              { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
            ],
            data : [      {
                               "name": "Rex",
                               "getDepartment" : $scope.departments;}
                           }
                       ]
          };

    }]);

Angularjs ui-grid row rest call

2 个答案: