web-dev-qa-db-ja.com

AngularJS ng-grid内に選択ドロップダウンを配置することは可能ですか？

私は以下をコーディングしました：

$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つの列ID、名前、ステータス、および説明が含まれています。ここで、statusは、myStatusと呼ばれる3種類のステータスを持つ単純なJavaScript配列です。

MyStatusのデータをng-gridのフィールドにリンクして、選択ドロップダウンから新しい値を選択できるようにすることはできますか？

angularjsng-grid
10
user1464139

これがいくつかの実験の出力です。

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

セルテンプレートにselectを入れることができるようです。また、rowオブジェクトを使用して、必要なものを取得できます。元のデータへのプロパティアクセスにrow.rowIndexを使用しました。

テンプレートの例：

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

（rowオブジェクトを介して元のデータに書き込むことができれば便利です。方法はわかりません。）

12
Tosh

Tosh shimayamaのやり方では、モデル配列以外の順序でテーブルを並べ替えることはできません。

これはちょっと醜い方法ですが、ng-gridのソースコードをざっと見てみると、正規表現を使用してng-modelを挿入していることがわかりました。したがって、同じ変数COL_FIELDをコードで使用することにより、ng-gridに正しいモデルを挿入させることができます。

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

実例のあるプランカーは次のとおりです。 http://plnkr.co/edit/Yj2qmI?p=preview

6
Andain

Ng-grid 2.xでこれを行うためのより完全でよりきちんとした方法ここでプランカーに含めました： http://plnkr.co/edit/VABAEu?p=preview 、コンテンツを活用ここでのstackoverflowに関する別の同様の質問から： AngularJSおよびng-grid-セルが変更された後、サーバーにデータを自動保存します

要約すると、編集可能なフィールドテンプレートのフォーマットは次のようになります。

      $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)" />';

エンドツーエンドコードのより完全なウォークスルーを含むブログ投稿を提供しました： http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-ドロップダウンと選択/

Ng-grid（ui-grid）3.0はリリース間近であり、編集可能なグリッドを作成するためのさまざまな方法を提供します。ここに投稿があります： http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

5
PaulL

ソリューション全体を信用することはできません。ピースをまとめるだけです。私の目標は、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}" />';

変更をネイティブにキャプチャできます。

$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-options）：

{
  field: 'status',
  displayName: 'Status',
  enableCellEditOnFocus: true,
  editableCellTemplate: $scope.cellSelectEditableTemplate,
  cellFilter: 'mapStatus:OptionsList'
}

ドロップダウン値のidをlabelに置き換えるフィルターを追加しました。

.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、label： "label1"}

このソリューションは非常に再利用可能であることがわかりました。うまくいけば、それは誰かのために時間を節約します。

0
Roman K