在角度ui-grid中返回cellClass函數中的承諾

在角度ui-grid中，我需要根據特定單元格的值設置cellClass。要確定單元類應該是什麼，我需要做一個相當昂貴的http查找，因此需要讓我的cellClass函數返回一個承諾。然而，它看起來並不像ui-grid等待解決的承諾，因爲cellClass沒有得到應用。這是不可能的，或者我做錯了。這個功能是爲了說明我需要發生。 Ofcourse，這將是一個$ HTTP調用，而不是一個$超時：在角度ui-grid中返回cellClass函數中的承諾

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

我創建了一個plunker顯示我的內涵： http://plnkr.co/edit/HqlT4lpQZ5BA2pWjxIL0?p=preview

來源

2015-12-17 BoKDamgaard

無需使用的承諾。這是你如何能做到這

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

 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]~3.3.5" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link data-require="[email protected]*" data-semver="3.0.7" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script> 
 
    <script data-require="[email protected]*" data-semver="3.0.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl" ng-init="setCellClass()"> 
 
    <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div> 
 
    </body> 
 

 
</html>

See Plnkr

來源

2015-12-17 11:12:20 Vivek

不要粗魯，但我不明白這是如何與ui-grid中的cellClass屬性相關的？ ui-grid不等待承諾解決 – BoKDamgaard

在你plnkr沒有ui-grid – Vivek

更新了我的答案。參見Plnkr – Vivek

如果你的目的是在3秒後返回值「黃」，這不是承諾的工作方式。

這是錯誤的

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

一個承諾立即返回。該承諾有時在未來中解決。已解決的值是使用.then方法從承諾中提取的。

將承諾視爲未來價值的容器。您可以使用.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); 
    }; 

};

來源

2015-12-17 13:09:26 georgeawg

好吧，要麼我沒有得到這個ui-grid的東西，要麼我們彼此之間也有誤解。在ui網格中，我可以指定一個在單元格被渲染時調用的函數。我想根據單元格的值返回一個要添加到該單元格的類。如果我只是在調用時返回一個字符串，它工作正常，但我需要調用Web服務來驗證值，並返回一個承諾。我將這個承諾返回給ui-grid，並且當webservice返回結果時，我解析承諾，在這種情況下，我希望ui-grid將解析值作爲類添加到單元格中。 – BoKDamgaard

看看你的Plnk中的javaScript控制檯。當你調用'cellClassDeferred'函數時，你會收到錯誤消息。 'cellClass'不接受承諾。 – georgeawg

@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呼叫。
使用返回的數據驗證輸入值。
有效值將以綠色顯示，無效將顯示爲紅色。

注：這僅適用於「鼠標模糊」，但不是「進入」按鍵，因爲UI電網將覆蓋從「輸入」按鍵的任何事件停止單元格編輯，並不會永遠可達到可以調用「$ http」的地步。但是肯定有一個解決方法。

來源

2015-12-22 20:00:12 Rajush

在角度ui-grid中返回cellClass函數中的承諾

回答

相關問題