19

これが私の問題です。

HTML 構造 :

<tr><td><a ng-click=aClick()>Click Me</a></td></tr>

および に関連付けられた ID/クラスを持つことはできません

私が必要とするのは、「Click Me」をクリックすると、<tr>が非表示になることです。jQuery ソリューションが必要です。なんとなく使えない$(this)。

関数：

$scope.aClick = function() {
   $(this).parent().parent().css('display','block');
};

しかし、このステートメントは私にエラーを与えます。

4

4 に答える 4

36

注: コントローラーで dom 操作を使用することはお勧めしません。これを行うためのディレクティブを作成できます。つまり、 を使用し$eventてイベント オブジェクトを取得でき、そこからイベント ターゲットを取得して jquery で使用できます。

<tr><td><a ng-click="aClick($event)">Click Me</a></td></tr>

と

  $scope.aClick = function(event) {
     $(event.target).parent().parent().css('display','none');
  };

デモ:プランカー

更新
より適切なAngularソリューションは、ng-hideを使用することです

<tr ng-hide="hideRow"><td><a ng-click="hideRow = true">Click Me</a></td></tr>

デモ:プランカー

ng-repeat でデモを更新

于 2013-04-23T08:05:12.440 に答える
7

angularを使用しているため、実際のdom操作を行う必要はほとんどありません。代わりに、これを行うng-hide/ng-showディレクティブを確認してください。

Angular ドキュメントの例:

<body>
    Click me: <input type="checkbox" ng-model="checked"><br/>
    Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/>
    Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>
</body>

編集

式の変数が非同期で更新される場合は、強制的に更新できます$scope.$apply

于 2013-04-23T08:01:05.277 に答える
6

これを使用できます：

JavaScript

function TestCtrl($scope) {
    $scope.clickMe = function ($event) {
        $($event.target).parent().parent().css('display','none');
    };
}

HTML

<div ng-app>
    <div ng-controller="TestCtrl">
        <a ng-click="clickMe($event)">Click me</a>
    </div>
</div>

ライブデモ

于 2013-04-23T08:07:35.153 に答える
0

このような簡単なことをしないのはなぜですか？これをループで実行すると仮定します...

<div ng-repeat="row in table">
<tr>
    <td>
        <a ng-class="{'hideme': hiddenRows[row.id]}" ng-click="hiddenRows[row.id] = true">Click Me</a>
    </td>
</tr>
</div>

またはさらに良い

<div ng-repeat="row in table">
    <tr ng-show="!hiddenRows[row.id]">
        <td>
            <a ng-click="hiddenRows[row.id] = true">Click Me</a>
        </td>
    </tr>
</div>

（私はそれをテストしませんでしたが、それはあなたにアイデアを与えるはずです）

于 2013-09-17T22:02:13.413 に答える