是否可以在AngularJS ng-grid内部选择下拉？

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实际上包含四个列ID,名称,状态和描述.status是一个简单的javascript数组,有三种类型的状态叫做myStatus.

是否有可能以某种方式将myStatus中的数据链接到ng-grid中的字段,以便我可以从选择下拉列表中选择一个新值？

Answer 1

这是一些实验的输出.

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 对象写入ogirinal数据,这将是美妙的.我不知道如何.)

Answer 2

tosh shimayama正在这样做的方式,不允许以除模型数组之外的任何其他顺序对表进行排序.

这是一种难看的方式,但我快速浏览了ng-grid的源代码,发现他们使用regexp来插入ng-model.因此,通过在代码中使用相同的变量COL_FIELD,可以使ng-grid插入正确的模型.

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

这是一个带有工作示例的plunker:http://plnkr.co/edit/Yj2qmI？p = preview

Answer 3

在ng-grid 2.x中执行此操作的更完整/更整洁的方法我在这里包含了一个plunker: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-dropdowns-and-选择/

Ng-grid(ui-grid)3.0即将发布,并提供了不同的方式来进行可编辑的网格.我在这里有一篇文章:http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/