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 and ng-grid - auto save data to the server after a cell was changed < / p>

总之，我的可编辑字段模板的格式如下：

      $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-selects/

Ng-grid（ui-grid）3.0即将发布，并提供了不同的方式来制作可编辑的网格。我在这里有一个帖子：http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Answer 4

我无法赞扬整个解决方案。我把这些碎片放在一起。我的目标是保持三方约束力。

模板看起来应该是这样的：

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

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

我添加了过滤器，用标识替换标签作为下拉值。

.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”}

我发现此解决方案具有高度可重用性。希望它为某人节省时间。

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

4 个答案: