10

我编写了以下代码：

$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、Name、Status 和 Description。其中 status 是一个简单的 javascript 数组，其中包含三种名为 myStatus 的状态。

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

4

4 回答 4

13

这是一些实验的输出。

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 。我不知道怎么做。）

于 2013-04-11T00:21:37.963 回答
6

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>

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

于 2013-07-01T12:04:24.060 回答
5

在 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/

于 2013-12-06T02:10:15.547 回答
0

我不能把整个解决方案归功于自己。我只是把碎片放在一起。我的目标是保留三向绑定。

模板应如下所示：

        $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'
}

我添加了过滤器以将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,label:"label1"}

我发现这个解决方案高度可重用。希望它可以为某人节省时间。

于 2015-04-19T18:58:16.147 回答