AngularJS ngグリッド内で選択ドロップダウンを行うことはできますか？

Question

私は次のようにコーディングされています：

$scope.gridOptions = { 
    data: 'myData', 
    enableCellEdit: true, 
    multiSelect: false, 
    columnDefs: [ 
     { field: 'Id', displayName: 'Id' }, 
     { field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }, 
     { field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate } 
    ] 
}; 

MYDATAは、実際には4つのcolums ID、名前、ステータスおよび説明が含まれています。ステータスは、myStatusという3種類のステータスを持つシンプルなjavascript配列です。

myStatusのデータをngグリッドのフィールドにリンクして、選択したドロップダウンリストから新しい値を選択することはできますか？

Answer 1

これは、いくつかの実験の結果です。

http://plnkr.co/edit/W1TkRgsp0klhqquxaiyc?p=preview

あなたが、細胞テンプレートにselectを置くことができるようです。 そしてrowオブジェクトを使用して、 が必要なものを取得することができます。 私はrow.rowIndexを使用して元のデータにアクセスしました。

テンプレート例：トッシュのshimayamaはそれをやっている

<div> 
    <select ng-model="myData[ row.rowIndex ].myStatus"> 
    <option ng-repeat="st in statuses">{{st}}</option> 
    </select> 
</div> 

（。。私たちはrow オブジェクトを通してogirinalデータに書き込むことができる場合には肌触りのだろう、私は方法がわからない）

Answer 2

方法、モデル配列以外の順序でテーブルをソートすることはできません。

これは醜い方法ですが、ng-gridのソースコードを簡単に見て、ngeモデルを挿入するためにregexpを使用していることがわかりました。したがって、コード内で同じ変数COL_FIELDを使用すると、ng-gridに正しいモデルを挿入することができます。 、http://plnkr.co/edit/VABAEu?p=preview活用：私はここにplunkerに含めましたNG-グリッド2.xでこれを行うには http://plnkr.co/edit/Yj2qmI?p=preview

Answer 3

より完全な/整然と方法：ここで

<div> 
    <select ng-model="COL_FIELD"> 
    <option ng-repeat="status in statuses">{{status}}</option> 
    </select> 
</div> 

は、実施例とplunkerですstackoverflowの上の別の類似の質問からコンテンツをここに：要約するとAngularJS and ng-grid - auto save data to the server after a cell was changed

、編集可能なフィールドテンプレートのための私のフォーマットはそうのようになります。

 $scope.statuses = {1: 'active', 2: 'inactive'}; 
     $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" 
     ng-input="COL_FIELD" ng-model="COL_FIELD" 
     ng-options="id as name for (id, name) in statuses" 
     ng-blur="updateEntity(row)" />'; 

NG-グリッド（UI-グリッド）3.0がリリースされているに近く、異なる方法を提供しています。私は、エンドツーエンドのコードのより完全なチュートリアルを持っているブログの記事を提供してきました

編集可能なグリッドを作成します。私はここにそれに関する記事を掲載しています：http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Answer 4

私はソリューション全体を評価することはできません。私はちょうど一緒に作品を置く。私の目標は、3方向の拘束力を維持することでした。セルを修正するための基準を維持するために不可欠もちろんの

 $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="value.id as value.label for value in OptionsList}" />';

COL_FIELD：

テンプレートは、次のようになります。

あなたはネイティブの変化を捉えることができます。

$scope.$on('ngGridEventEndCellEdit', function (evt) { 
 
      console.log(evt.targetScope.row.entity); 
 
      WaitListArray.$save(evt.targetScope.row.entity) 
 
       .then(function (ref) { 
 
        console.log('saved'); 
 
       }); 
 
     });

をWaitListArrayは、テーブルのための私のFirebase/AngularFireアレイであるこの場合。このメソッドを使用して、私はツリー・バインディングを保持することができました。

フィールド（NG-オプション）：

私は私のドロップダウン値のIDとラベルを置き換えるためにフィルタを追加しました。上記で

.filter('mapStatus', function() { 
 
    return function(input, OptionsList) { 
 
    var _out = 'unknown'; 
 
    angular.forEach(OptionsList, function(value, key) { 
 

 
     if (value && value.id == input) { 
 
     _out = value.label; 
 
     } 
 
    }); 
 
    return _out; 
 

 
    }; 
 
})

、OptionsList私のドロップダウン値のアレイ 例である：{ID：1、ラベル "LABEL1"}

私は非常にこの解決策を見つけました再利用可能。うまくいけば、それは誰かの時間を節約します。