Как заставить всю строку в таблице действовать как гиперссылка (открыть в новой вкладке и т. Д. c) в таблице ngtable (angularjs) - PullRequest
Новая
       31

Как заставить всю строку в таблице действовать как гиперссылка (открыть в новой вкладке и т. Д. c) в таблице ngtable (angularjs)

1 голос
/ 13 апреля 2020

Я использую AngularJS с ngtable.

Каждый раз, когда я создаю таблицу, я помещаю ui-sref в <tr> элемент, подобный этому: 

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

Однако это не позволяет пользователю открывать запись в новой вкладке, щелкните правой кнопкой мыши на ней, чтобы открыть в новом окне, и т. Д. c (она не действует как <a>)

Можно ли как-нибудь сделать всю строку кликабельной с возможностью открытия в новой вкладке / окне (как в случае)

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

Вы можете сделать это, используя функцию $state.href и window.open.

Также используйте переменную для управления новой вкладкой или нет: 

// <tr ng-repeat="element in $data" ng-click="navigateTo(element.id, false)"> -- Same Tab
<tr ng-repeat="element in $data" ng-click="navigateTo(element.id, true)">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

...

//In the controller
$scope.navigateTo = function(id, inNewTab){
  if(inNewTab){ // New tab
     var url = $state.href('app.some.details.info', {id: id});
     window.open(url , "_blank")
  } else { // Same tab
     $state.go('app.some.details.info', {id: id});
  }
}
1 голос
/ 13 апреля 2020

Йо! Если вы хотите, чтобы содержимое строки действовало как элемент <a />, возможно, вы можете обернуть содержимое <td> привязкой. Примерно так: 

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>
    <a href="#" title="...">{{element.name}}</a>
  </td>
  <td>
    <a href="#" title="...">{{element.info}}</a>
  </td>
</tr>

Вы также можете создать несколько пользовательских javascript, которые воссоздают поведение <a />. Создайте прослушиватель кликов для каждой строки таблицы и используйте window.location.href = ....

...