Подтвердить что ты не робот

Установка ng-href в элементах <tr>

Следующий код делает client.name привязкой к каждому клиенту в клиентах. Я заинтересован в том, чтобы весь элемент <tr> был ссылкой. ng-href не работает с элементом <tr>. Что я могу сделать так, чтобы вся строка была единственной ссылкой, созданной ng-href?

<tr ng-repeat="client in clients">
    <td><a ng-href="#/user/{{client.tagid}}">{{client.firstname}}</a></td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>

То, что я хочу сделать, это что-то вроде этого.. что, конечно, не работает.

<a ng-href="#/user/{{client.tagid}}">
    <tr ng-repeat="client in clients">
        <td>{{client.firstname}}</td>
        <td>{{client.lastname}}</td>
        <td>{{client.inumber}}</td>
    </tr>
</a>

ИЛИ

<tr ng-repeat="client in clients" ng-href="#/user/{{client.tagid}}">
    <td>{{client.firstname}}</td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>
4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать ng-click (вместо onClick), как предлагает Джейсон.

Что-то вроде:

HTML

<tr ng-repeat="client in clients" ng-click="showClient(client)">
    <td><a ng-href="#/user/{{client.tagid}}">{{client.firstname}}</a></td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>

контроллер

$scope.showClient = function(client) {
  $location.path('#/user/' + client.tagid);
};

И стиль, чтобы он отображался как элемент, который можно щелкнуть (не работает в IE7)

CSS

tr {
  cursor: pointer;
}
// or
[ng-click] {
  cursor: pointer;
}

Ответ 2

Я написал директиву, чтобы вы могли просто написать:

<tr ng-repeat="client in clients" such-href="#/user/{{client.tagid}}">

Источник:

app.directive('suchHref', ['$location', function ($location) {
  return{
    restrict: 'A',
    link: function (scope, element, attr) {
      element.attr('style', 'cursor:pointer');
      element.on('click', function(){
        $location.url(attr.suchHref)
        scope.$apply();
      });
    }
  }
}]);

Ответ 3

Я использую собственную директиву Angular, которая автоматически переносит каждую ячейку в строке со ссылкой.

Преимущества:

  • Вы не дублируете код.
  • В каждой ячейке есть регулярная ссылка, поэтому такие вещи, как "Открыть в новой вкладке" (средняя кнопка или CTRL + щелчок), работают как ожидалось (в отличие от версии ng-click).

Использование HTML:

<tr row-href="#/user/{{client.tagid}}">
    <td>...</td>
    <td>...</td>
</tr>

Код директивы (в TypeSript):

export class RowHrefDirective implements ng.IDirective {

    constructor(private $compile: ng.ICompileService) {
    }

    restrict = "A";

    scope = {
        rowHref: "@rowHref"
    };

    link = (scope: Scope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {
        const cells = element.children("td[skip-href!='yes'],th[skip-href!='yes']");

        cells.addClass("cell-link");

        for (const cell of cells.toArray()) {
            const link = jQuery(`<a ng-href="{{ rowHref }}"></a>`);
            this.$compile(link)(scope);
            jQuery(cell).prepend(link);
        }
    }
}

Требуемый код CSS (чтобы заполнить всю ячейку ссылкой):

td.cell-link,
th.cell-link {
    position: relative;
}

td.cell-link a,
th.cell-link a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Ответ 4

Это проблема CSS и HTML, не относящаяся к AngularJS. Единственным допустимым дочерним элементом <tr> является <td>, поэтому вам нужно обернуть содержимое каждой ячейки в привязке. Вы также должны сделать якорь блочным элементом, чтобы сделать его полной высотой/шириной своего контейнера:

<tr ng-repeat="client in clients">
  <td>
    <a style="display: block;" ng-href="#/user/{{client.tagid}}">
      {{client.firstname}}
    </a>
  </td>
  <td>
    <a style="display: block;" ng-href="#/user/{{client.tagid}}">
      {{client.lastname}}
    </a>
  </td>
  <td>
    <a style="display: block;" ng-href="#/user/{{client.tagid}}">
      {{client.inumber}}
    </a>
  </td>
</tr>

Ответ 5

<tr ng-repeat="client in clients" ng-href="#/user/{{client.tagid}}">
    <td>{{client.firstname}}</td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>

Это ссылка на предоставленные опции, которые могут работать. Я думаю, что это связывает всю строку с каждым полем в строке. но не доступен для просмотра. как это сделать. я имею в виду, что мы должны иметь возможность щелкнуть, чтобы открыть другой вид/модуль.

Ответ 6

В соответствии с запросом @sfs, решение, используемое для кода ui-sref (Angular 1.5; TypeScript, извиняется за любые неудобства).

Кредиты: Код основан на удивительном ответе Мартин Волек:

import { IDirective, IDirectiveFactory, ICompileService, forEach, element } from 'angular';

export default class RowUiSrefDirective implements IDirective {

  restrict = 'A';
  scope = { rowUiSref: '@rowUiSref' };

  constructor(private $compile: ICompileService) { }

  link = (scope, elm, attrs) => {
    if (elm[0].tagName !== 'TR') {
      throw new Error('This directive should only be used in <tr> elements.');
    }

    forEach(elm.children(), (cell) => {

      if (cell.attributes['skip-href'] && cell.attributes['skip-href'].value !== 'false') {
        return;
      }

      cell.className += ' cell-link';
      let link = element('<a ui-sref="{{rowUiSref}}"></a>');
      this.$compile(link)(scope);
      element(cell).prepend(link);
    });
  };

  static factory(): IDirectiveFactory {
    let directive = ($compile: ICompileService) => new RowUiSrefDirective($compile);
    directive.$inject = ['$compile'];
    return directive;
  };

}

Инициализация директивы:

import { module } from 'angular';
import RowUiSrefDirective from './rowUiSref';

module('app').directive('rowUiSref', RowUiSrefDirective.factory());

Пример использования:

<table>
  <tr ng-repeat="item in itemController.items"
      row-ui-sref="state.item({itemId: '{{item.id}}'})">
    <td>{{item.name}}</td>
    <td>{{item.label}}</td>
  </tr>
</table>

Ответ 7

Уродливым решением было бы просто иметь 1 ячейку таблицы, которая содержит ссылку, а затем внутри нее добавить другую таблицу со строкой таблицы и другими ячейками. Таким образом, это будет выглядеть следующим образом:

<tr ng-repeat="client in clients">
    <a ng-href="#/user/{{client.tagid}}">
        <table>
            <tr>
                <td>{{client.firstname}}</td>
                <td>{{client.lastname}}</td>
                <td>{{client.inumber}}</td>
            </tr>
        </table>
    </a>
</tr>

Я не согласен с использованием таблиц для макета!

Тем не менее, вы используете JavaScript и angularjs, поэтому было бы неплохо добавить событие click в строку таблицы, которое отправляет пользователя по URL-адресу через window.location например.

<tr ng-repeat="client in clients" ng-click="ChangeLocation([yoururl])">    
    <td>{{client.firstname}}</td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>    
</tr>

Затем в вашей функции $scope есть функция, которая будет обрабатывать это:

$scope.ChangeLocation = function(url){
    window.location = url;
}

Ответ 8

Попробуйте это...

HTML --- >

<ul ng-repeat ="item in itemList "> <li><a data-ng-href="{{getUrl(item)}}">{{item.Name}}</a></li> </ul>

JS --- >

$scope.getUrl = function (item) { return '/<give your path here>/' + item.ID; };

Ответ 9

мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote мы

Blockquote