Добавить идентификатор (id) в текстовое поле веб-страницы

Question

Мы знаем, что мы можем использовать атрибут id в тегах HTML, чтобы предоставить каждому тегу HTML идентификатор для использования.

Теперь я использую Angular JS ng-grid в файле JS-файла controller для создания полей ввода веб-страницы (ниже показан фрагмент кода). У меня уже есть 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; 
         } 
         }); 
       } 
      }; 

Answer 1

Вы можете прочитать значение свойства в 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.