ui-grid의 드롭 다운을 데이터베이스의 데이터로 채울 수 있습니까?

Question

데이터베이스에서 필드로 전달되는 UI 그리드 내에서 드롭 다운을 사용하려고하면 여기에 어떤 문제가 있습니다. docs 후, gridOptions.columnDefs에, 나는 같은 ID의 배열과 값 생성이 :

{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%', 
    cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: [ 
    { id: 1, gender: 'male' }, 
    { id: 2, gender: 'female' } 
] }, 

을하지만, 내 경우 엔은 "아이디"및 "값"에서의 필드 수 있어야합니다 데이터베이스 :

{ id: data.Id, gender: data.Nome } 

그냥 작동하지 않습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 감사합니다.

Answer 1

같은 것을보십시오이

editableCellTemplate: 'ui-grid/dropdownEditor', 
editDropdownOptionsArray: YourDataArray, 
editDropdownIdLabel: 'Id', 
editDropdownValueLabel: 'Nome' 

YourDataArray는 서비스 호출이 될 수 -) 나를 위해 내가 MyServiceName.Get (로 전화를 가지고, 예를 들어, - 개체가 '아이디'와 '같은 속성을 가질 수 반환 당신의 질문과 같이 '놈'.

Answer 2

Angular Grid을 사용하는 것이 좋습니다. 사용자 정의 셀 렌더러를 사용할 수 있으며 대화 형 셀 렌더러를 사용할 수 있습니다. 나는 내 일을하고있다. (내가 일하는 회사에 속한 코드 예제를 게시 할 수 없다.) 그러나 이것이 옵션이라면 뭔가를 조롱하고 게시 할 수있다.

Answer 3

내 접근 방식입니다. I는 이와 같은 uiGridFactory.js 정의

https://github.com/angular-ui/ng-grid/issues/2808

1) : 이것은 스레드에 기반

angularFactories.factory('uiGridFactory', function ($http, $rootScope) { 

var factory = {}; 

/* It returns a dropdown filter to help you show editDropdownValueLabel 
* 
* Parameters: 
* 
* - input: selected input value, it always comes when you select a dropdown value 
* - map: Dictionary containing the catalog info. For example: 
* $scope.languageCatalog = [ {'id': 'EN', 'description': 'English'}, {'id': 'ES', 'description': 'Español'} ] 
* - idLabel: ID label. For this example: 'id'. 
* - valueLabel: Value label. For this example: 'description'. 
* 
* 1) Configure cellFilter this way at the ui-grid colDef: 
* 
* { field: 'languageId', name: 'Language'), editableCellTemplate: 'ui-grid/dropdownEditor', 
* editDropdownIdLabel: 'id', editDropdownValueLabel: 'description', 
* editDropdownOptionsArray: $scope.languageCatalog, 
* cellFilter: 'mapDropdown:row:row.grid.appScope.languageCatalog:"id":"description":languageCatalog' }, 
* 
* 2) Append this snippet to the controller: 
* 
* .filter('mapDropdown', function(uiGridFactory) { 
* return uiGridFactory.getMapDrowdownFilter() 
* }); 
* 
*/ 
factory.getMapDrowdownFilter = function() { 

    return function(input, map, idLabel, valueLabel) { 

     if (map != null) 
     { 
      for (var i = 0; i < map.length; i ++) { 
       if (map[i][idLabel] == input) 
       { 
        return map[i][valueLabel]; 
       } 
      } 
     } 
     return ""; 
    } 
} 

return factory; 

}); 

2) 그런 다음 I 컨트롤러의 단부에 필터 mapDropdown 첨가 그 내가 드롭 다운이 들어있는 열 정의에이 cellFilter 추가) 드롭 다운 논리

.filter('mapDropdown', function(uiGridFactory) { 
    return uiGridFactory.getMapDrowdownFilter() 
}); 

3 필요합니다

columnDefs: [ 
    { field: 'id', 'ID')}, 
    { field: 'languageId', name: 'Language', 
      editableCellTemplate: 'ui-grid/dropdownEditor', 
      editDropdownIdLabel: 'id', editDropdownValueLabel: 'description', 
      editDropdownOptionsArray: $scope.languageCatalog, 
      cellFilter: 'mapDropdown:row.grid.appScope.languageCatalog:"id":"description"' }, 
    { field: 'comments', 'Comments' } 
] 

여기서 mapDropdown() 파라미터는 :

a) 탈 맵 (row.grid.appScope.languageCatalog)

b)는 ID 라벨

c) 상기 VALUE 레이블

참고 : 필자는 필자가 데이터베이스에서 factory로로드 한 $ scope.languageCatalog 변수를 사용했습니다. 직접 구현해야합니다.

factory.getLanguages = function (callback) { 

    $http.get(RESOURCES.REST_ADDRESS + 'getLanguages'). 
     success(function (data, status, headers, config) { 

      callback(data); 
     }). 
     error(function (data, status, headers, config) { 

     }); 
}