是否可以在AngularJS ng网格内有一个选择下拉列表?
我已编写了以下代码:是否可以在AngularJS ng网格内有一个选择下拉列表?,angularjs,ng-grid,Angularjs,Ng Grid,我已编写了以下代码: $scope.gridOptions = { data: 'myData', enableCellEdit: true, multiSelect: false, columnDefs: [ { field: 'Id', displayName: 'Id' }, { field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemp
$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网格中的一个字段,这样我就可以从选择下拉列表中选择一个新值?下面是一些实验的输出 似乎可以在单元格模板中放置
选择。
您可以使用行
对象检索任何内容
你需要。
我使用row.rowIndex
对原始数据进行属性访问
模板示例:
<div>
<select ng-model="myData[ row.rowIndex ].myStatus">
<option ng-repeat="st in statuses">{{st}}</option>
</select>
</div>
{{st}}
(如果我们可以通过行
对象。我不知道如何。)tosh shimayama的方法不允许以模型数组以外的任何其他顺序对表进行排序
这是一种丑陋的方法,但我快速查看了ng grid的源代码,发现它们使用regexp插入ng模型。因此,通过在代码中使用相同的变量COL_FIELD,可以使ng grid插入正确的模型
<div>
<select ng-model="COL_FIELD">
<option ng-repeat="status in statuses">{{status}}</option>
</select>
</div>
{{status}}
下面是一个plunker,其中有一个工作示例:
在ng grid 2.x中,我在这里的一个plunker中提供了一种更完整、更整洁的方法:,利用stackoverflow中另一个类似问题的内容:
总之,我的可编辑字段模板格式如下所示:
$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)" />';
$scope.statuses={1:'active',2:'inactive'};
$scope.cellSelectEditableTemplate='';
我提供了一篇博客文章,其中对端到端代码进行了更全面的演练:
Ng grid(ui grid)3.0即将发布,它提供了不同的方法来制作可编辑网格。我在这里有一个帖子:我不能把整个解决方案归功于我。我只是把这些碎片拼在一起。我的目标是保留三向绑定
模板应如下所示:
$scope.cellSelectEditableTemplate=''代码>有没有办法让order grid选项与此配合使用这是所有选项中最好的答案我正在使用angular ui grid,您的解决方案几乎可以正常工作。我必须将ng模型更改为row.entity.status(匹配的字段名),因为COL_字段无法修改。它在编译每一行时抛出错误。