Получите $this в angularjs

Вот моя проблема.

Структура HTML:

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

Я не могу иметь никакого id/class, связанного с и

Мне нужно, чтобы при нажатии кнопки "Click Me", <tr> скрывается. Мне нужно решение jQuery. Некоторые, как я не могу использовать $(this).

ФУНКЦИЯ:

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

Но это утверждение дает мне ошибку.

Ответы

Ответ 1

Примечание. Я бы не рекомендовал использовать манипуляцию 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');
  };

Демо: Plunker

Обновление
Более подходящим решением angular будет использование ng-hide

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

Демо: Plunker

Обновлено демо с помощью ng-repeat

Ответ 2

Поскольку вы используете angular, вам очень редко нужно делать фактические манипуляции с dom. Вместо этого ознакомьтесь с директивой ng-hide/ng-show, которая должна сделать это для вас.

Пример из Angular docs:

<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

Ответ 3

Вы можете использовать это:

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>

демо-версия

Ответ 4

почему бы вам не сделать что-то простое? Я предполагаю, что вы запускаете это в цикле...

<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>

(я не тестировал его, но он должен дать вам идею)