Tôi đang sử dụng lưới ui để liên kết dữ liệu từ Bảng Vai trò có chứa Id của Bộ là PrimaryKey. Tôi đang gọi Web Api để có được tất cả các vai trò trong bảng và hiển thị trong ui-lưới.
Bảng cục
Vai trò Bảng
vấn đề thực sự của tôi là tôi muốn chuyển đổi Id cục Sở Tên khi nó liên kết với lưới điện sử dụng cellFilter và đó là tại sao tôi khai báo objMapping để ánh xạ Id của Bộ với Tên Bộ phận. Nhưng mỗi khi tôi chạy tôi thấy rằng chức năng tùy chỉnh cellFilter tức là 'mapDepartmentName' đang được gọi trước khi objMapping đang được thiết lập và tôi cũng không thể tham chiếu objMapping trong 'mapDepartmentName'.
lưới của tôi trông như thế này: -
Tuy nhiên khi tôi chỉnh sửa tôi nhận được kết quả như sau đó là hoàn toàn chính xác: -
đoạn mã của tôi như sau : -
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> \t
<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>
Đây là cuộc gọi không đồng bộ. $ scope. $ apply() cũng không giúp ích gì. – user1843970