19

这是我的问题。

HTML结构：

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

我不能有任何与 and 相关联的 id/class

我需要的是点击“点击我”，<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');
  };

演示：Plunker

更新
更合适的角度解决方案是使用 ng-hide

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

演示：Plunker

使用 ng-repeat更新了演示

于 2013-04-23T08:05:12.440 回答
7

由于您使用的是角度，因此您应该很少需要进行实际的 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 回答