我们知道我们可以使用HTML标记中的id
属性为每个HTML标记提供一个标识符供使用。
现在,我在controller
JS文件中使用Angular JS ng-grid来创建网页输入字段(代码片段如下所示)。我已经columnDefs
定义了名称/字段对。 (代码有效。)
如何为每个输入字段分配id
?
代码段:
var injectParams = ['$scope', '$log', '$location', 'caseService', 'ngDialog'];
var DraftCasesController = function ($scope, $log, $location, caseService, ngDialog) {
// initial setting - true upon selecting case from Master (table)
$scope.showDraftCaseDetail = false;
$scope.$scope = $scope;
$scope.gridOptions = {
pagingPageSizes: [5, 10, 10],
pagingPageSize: 5,
enableSorting: true,
enableFiltering: true,
enableSelectionBatchEvent: false,
enableRowSelection: true,
enableSelectAll: false,
enableRowHeaderSelection:false,
columnDefs: [
{name:'Case Identifier', field: 'number'},
{name:'Violator', field: 'violator', allowCellFocus : false },
{name:'Case Type', field: 'caseTypeDescription'},
{name:'Violation Type', field: 'violationType'},
{name:'Date Created',field: 'caseCreationDate'},
{name:'Delete?',field: 'caseId', enableFiltering:false,enableCellEdit: false,cellTemplate: '<button id="deleteBtn" type="button" class="glyphicon glyphicon-trash" aria-hidden="true" ng-click="getExternalScopes().deleteCase(row)" ></button> '}
],
onRegisterApi: function (gridApi) {
//$scope.grid1Api = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
if(row.isSelected)
{
scope.getDraftCaseData(row.entity.caseId);
$scope.showDraftCaseDetail = true;
}
});
}
};
答案 0 :(得分:0)
您可以使用以下内容在columnDefs
中阅读该属性的值:
{{row.getProperty(col.field)}}
因此,您的按钮模板可以更改为此设置以设置id
:
'<button id="{{row.getProperty(col.field)}}" type="button" class="glyphicon glyphicon-trash" aria-hidden="true" ng-click="getExternalScopes().deleteCase(row)" ></button>'
这假设您要将id
设置为caseId
值。
您可以在documentation for cell template中找到更多相关示例。