我使用ui-grid绑定来自Role Table的数据,其中包含Department Id作为PrimaryKey.我正在调用Web Api来获取表中的所有角色并以ui-grid显示.
部门表
角色表
我真正的问题是,当我使用cellFilter绑定到网格时,我想将部门ID转换为部门名称,这就是为什么我声明objMapping以使用部门名称映射部门ID.但是每当我运行时,我都会看到在设置objMapping之前调用了cellFilter自定义函数,即’mapDepartmentName’,而且我也无法在’mapDepartmentName’中引用objMapping.
我的网格看起来像这样： –
但是当我编辑时,我得到的结果如下,这绝对是正确的： –
我的代码片段如下： –
var myApp = angular.module('appHome',['ui.grid','ui.grid.edit']);
myApp.controller("ctrlRole",['$scope','MetadataOrgFactory',function ($scope,MetadataOrgFactory) {
var arrDepts = [];
var objMapping = {};
MetadataOrgFactory.getApiCall('getpublisheddepts',function (dataSuccess) {
$scope.department = dataSuccess;
for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
var objDept = { id: dataSuccess[cntElem].DeptId,DeptId: dataSuccess[cntElem].DeptName }
arrDepts.push(objDept);
objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
}
$scope.gridRole.columnDefs[1].editDropdownoptionsArray = arrDepts;
},function (dataError) {
});
$scope.gridRole = {
data: 'roleData',columnDefs: [
{
field: 'RoleName',displayName: 'Role Name',},{
field: 'DeptId',displayName: 'Department Name',editableCellTemplate: 'ui-grid/dropdownEditor',cellFilter: 'mapDepartmentName:this',editDropdownValueLabel: 'DeptId',{
field: 'RoleDesc',displayName: 'About Role',{
field: 'WorkingHrs',displayName: 'Working Hours',{
field: 'RequestNumber',displayName: 'RequestNumber',cellEditableCondition: true
}
]
}
MetadataOrgFactory.getApiCall('getallroles',function (dataSuccess) {
$scope.roleData = dataSuccess;
},function (dataError) {
});
}])
.filter('mapDepartmentName',function () {
return function (input,scope) {
if (!input) {
return '';
} else {
return objMapping[input];
}
};
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
</style>
<Meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="../Scripts/AngularControllers/RoleController.js"></script>
<script src="../Scripts/Angularservices/ApiCallService.js"></script>
</head>
<body ng-app="appHome">
<div ng-controller="ctrlRole">
<div class="gridStyle" ui-grid="gridRole" ui-grid-edit>
</div>
</div>
</body>
</html>
解决方法
在工厂回调结束时,在getpublisheddepts中调用$scope.$apply().
因为你没有显示你的工厂我相信它做了异步的事情,这并没有通知视图反映变化.