Question

在角度网格中，我需要根据它们的值设置特定单元格的cellClass。要确定单元类应该是什么，我需要进行相当昂贵的http查找，因此需要使我的cellClass函数返回一个promise。然而，由于cellClass没有得到应用，因此ui-grid看起来并不等待解决的承诺。是不可能还是我做错了。这个功能是为了说明我需要发生的事情。当然，这将是$ http调用，而不是$ timeout：

function cellClassDeferred() {
    var defer = $q.defer();
    $timeout(function() {
      defer.resolve('yellow');
    }, 3000);
    return defer.promise;
  }

我创造了一个能够显示我内心的掠夺者： http://plnkr.co/edit/HqlT4lpQZ5BA2pWjxIL0?p=preview

Answer 1

无需使用承诺。这就是你如何做到的

allowMultiQueries

var app = angular.module('plunker', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', function($scope, $q, $timeout) {
  $scope.cls = '';
  
  $scope.gridOptions = {
    columnDefs: [{
      name: 'value1',
      displayName: 'Value 1',
      cellClass: cellClassDirect
    }, {
      name: 'value2',
      displayName: 'Value 2',
      cellClass: ''
    }, ],
    data: [{
      value1: 10,
      value2: 20
    }]
  };

  function cellClassDirect() {
    return 'red';
  }

$scope.setCellClass = function(){
    $timeout(function() {
      $scope.gridOptions.columnDefs[1].cellClass = 'yellow';
      $scope.gridOptions = angular.copy($scope.gridOptions);
    }, 3000);
}

});

<强> See Plnkr

Answer 2

如果您打算在3秒后返回“黄色”值，那么这不是承诺的工作方式。

这是错误的

function cellClassDeferred() {
    var defer = $q.defer();
    $timeout(function() {
      defer.resolve('yellow');
    }, 3000);
    return defer.promise;
  }

立即返回承诺。承诺将在未来中解决。使用.then方法从promise中提取已解析的值。

将承诺视为未来价值的容器。您可以使用.then方法指示$ q服务如何处理未来值。

function setFutureCellColor() {
    var promise = $timeout(function(){return 'yellow'}, 3000);

    promise.then (function (color) {
        //operation delayed 3 seconds
        $scope.gridOptions.columnDefs[1].cellClass = color;
        //trigger update of grid
        $scope.gridOptions = angular.copy($scope.gridOptions);
    };

    //container with future value
    //container returned immediately
    return promise;
};

<强>更新

同样建议使用httpPromises：

function setGridFromUrl() {

    var httpPromise = $http(url);

    httpPromise.then (function (results) {
        //waits for results from server
        $scope.gridOptions.columnDefs = results.data.columnDefs;
        //trigger update of grid
        $scope.gridOptions = angular.copy($scope.gridOptions);
    };

};

Answer 3

@BoKDamgaard如果我没弄错，你试图在$ http调用后进行实时细胞验证。这就是你需要做的。

您需要在columnDefs中使用editableCellTemplate和cellTemplate属性。

  $scope.gridOptions = {
      enableSorting: true,
      columnDefs: [
         { field: 'company',
           enableCellEdit: true,
           editableCellTemplate: "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng-blur=\"grid.appScope.cellValidate(grid, row, col, rowRenderIndex, colRenderIndex)\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"></form></div>",
           cellTemplate: "<div ng-class='{\"red\":row.entity.validCompany === false, \"green\":row.entity.validCompany === true }' class='ui-grid-cell-contents' >{{COL_FIELD }}</div>"
         }
      ]
 };

我创建了Example: PLUNKER

这就是它正在做的事情：

添加一行，并在可编辑行中输入值。
焦点松散（模糊），进行$ http电话。
使用返回的数据验证输入值。
有效值为绿色，无效为红色。

注意：这仅适用于＆＃34;鼠标模糊＆＃34;，但不适用于＆＃34;输入＆＃34;按键，因为ui-grid会覆盖来自＆＃34;输入＆＃34;按键停止单元格编辑，并且无法达到＆＃34; $ http＆＃34;可以被调用。但肯定有一个解决方法。

从角度ui-grid中的cellClass函数返回一个promise

3 个答案: