選択タグとしてuiグリッド表示セル

私は列の1つが性別タイプ（「性別」：男性、女性..）を表すuiグリッドの例を持っています。グリッドにバインドするjsonデータには（1,2,3 ...）のようなコードタイプが含まれていますしかし、コードが1の場合は「男性」のような性別の名前を表示したいと考えていますそして、ユーザーはリストから新しい性別を選択します。新しい性別の名前を表示します。 jsonデータの性別コードを更新します。実際に選択タグとしてuiグリッド表示セル

私は基本的なHTMLテーブルを使用する場合、それはこれまでのところ（私はplnkrリンクの例を追加した）

任意のアイデア？

//コードはこことplunkerのリンク行く：http://plnkr.co/edit/g6xYama3MidekeDqI3p8?p=preview

VARアプリ= angular.module（ 'アプリ'、[ 'ngAnimate'、 'ui.grid'、 'ui.grid.edit'、」 ui.gridcellNav ']）;

app.controller（ 'MainCtrl'、[ '$スコープ'、 '$ HTTP' 関数（$の範囲、$ HTTP）{

$scope.genderTypes = [{ 
    ID: 1, 
    type: 'male' 
}, { 
    ID: 2, 
    type: 'female' 
}, { 
    ID: 3, 
    type: 'both' 
}, { 
    ID: 4, 
    type: 'none' 
}, ]; 


$scope.gridOptions = { 
    enableSorting: true, 
    enableFiltering: true, 
    enableCellEditOnFocus: true, 
    columnDefs: [{ 
    field: 'name', 
    sort: { 
     direction: 'desc', 
     priority: 1 
    } 
    }, { 
    field: 'gender', 
    editType: 'dropdown', 
    enableCellEdit: true, 
    editableCellTemplate: 'ui-grid/dropdownEditor', 
    editDropdownOptionsArray: $scope.genderTypes, 
    editDropdownIdLabel: 'ID', 
    editDropdownValueLabel: 'type' 
    }, { 
    field: 'company', 
    enableSorting: false 
    }], 
    onRegisterApi: function(gridApi) { 
    grid = gridApi.grid; 
    } 
}; 
$scope.gridOptions.data = [ { "name": "Ethel Price", "gender": "1", "company": "Enersol" }, { "name": "Claudine Neal", "gender": "2", "company": "Sealoud" }, { "name": "Beryl Rice", "gender": "3", "company": "Velity" }, { "name": "Wilder Gonzales", "gender": "4", "company": "Geekko" }, { "name": "Georgina Schultz", "gender": "1", "company": "Suretech" }]

}]）。

出典

2016-05-17 user3274100

はあなたのための私の答えの仕事をしましたか？ – Brian

セルフィルターを適用する必要があります。私はあなたのプランナーをソリューションで分けました。

フィルタ：

app.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female', 
    3: 'both', 
    4: 'none' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
});

コラムデフ：

{ 
    field: 'gender', 
    editType: 'dropdown', 
    cellFilter: 'mapGender', 
    enableCellEdit: true, 
    editableCellTemplate: 'ui-grid/dropdownEditor', 
    editDropdownOptionsArray: $scope.genderTypes, 
    editDropdownIdLabel: 'ID', 
    editDropdownValueLabel: 'type' 
}

Plunker：http://plnkr.co/edit/hnaMJjBGaQgMGcgt3Hc2?p=preview

参考文献：