将标识符(id)添加到网页文本字段

时间:2015-01-13 16:25:38

标签: angularjs ng-grid

我们知道我们可以使用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;
                         }
                        });
                }
            };

1 个答案:

答案 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中找到更多相关示例。