UI-Grid에서 $ http Response보다 CellFilter가 먼저 호출됩니다.

Department ID가 PrimaryKey 인 역할 테이블에서 ui-grid를 사용하여 데이터를 바인딩하고 있습니다. Web Api를 호출하여 테이블에서 모든 역할을 수행하고 ui-grid로 표시합니다.

부서 표

역할 표 내 진짜 문제는 내가 그것을 cellFilter를 사용하여 그리드에 바인딩 할 때 부서명에 부서 이드 변환 할과 그 때문이다

부서명으로 부서 ID를 매핑하기 위해 objMapping을 선언하는 이유는 무엇입니까? 하지만 내가 실행할 때마다 objMapping이 설정되기 전에 'mapDepartmentName'이라는 cellFilter 사용자 정의 함수가 호출되는 것을 볼 수 있으며 '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> \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>

출처

2017-05-01 user1843970

전화 $ 범위. $ 공장 콜백의 끝에서 getpublisheddepts에서()에 적용됩니다.

당신은 내가보기에는 변경 사항을 반영하기 위해 알리지 않고있는 비동기식 작업을한다고 믿습니다.

출처

2017-05-04 21:23:33 mastermind

이 비동기 호출입니다. $ scope. $ apply()도 도움이되지 않습니다. – user1843970

나는 오랫동안 문제에 봉착했습니다. 코드에서 다음과 같은 변경을 수행했으며 결과도 얻고 있습니다. 문제는이에 대한 올바른 솔루션 있으면 알려 주시기 바랍니다 : -

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.deptmapping = objDeptMapping;  //new code added here 
     $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts; 
    }, function (dataError) { 
    });

필터 클래스

.filter('mapDepartmentName', function() { 
    return function (input, scope) { 
     if (!input) { 
      return ''; 
     } else { 
      return scope.grid.appScope.deptmapping[input]; //Change in code 
     } 
    }; 
});

출처

2017-05-04 23:13:03 user1843970

그건 본질적으로해야 할 일입니다. –

UI-Grid에서 $ http Response보다 CellFilter가 먼저 호출됩니다.

답변

관련 문제