19

次のコードは、 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>
4

9 に答える 9

32

Jason が提案するように、(onClick の代わりに) ng-clickを使用することもできます。

何かのようなもの：

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;
}
于 2013-08-20T20:45:32.953 に答える
11

簡単に書けるように、ディレクティブを書きました。

<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();
      });
    }
  }
}]);
于 2014-05-16T15:50:06.410 に答える
4

行内のすべてのセルをリンクで自動的にラップする独自の 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%;
    }
}
于 2016-07-06T21:32:42.573 に答える
3

これは CSS と HTML の問題であり、AngularJS に固有のものではありません。a の唯一の許可された子は a<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>
于 2013-08-20T20:45:21.837 に答える
1

@sfs のリクエストに応じて、これが私たちが使用しているソリューションですui-sref(Angular 1.5; TypeScript コード、ご不便をおかけして申し訳ありません)。

クレジット:コードは、 Martin Volekによるすばらしい回答に基づいています。

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>
于 2017-08-01T13:06:31.467 に答える
0

醜い解決策は、リンクを含む 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 を使用しているため、テーブルの行にクリック イベントを追加して、ユーザーを 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;
}
于 2013-08-20T20:51:28.773 に答える