Angular Active ng-class无法正常工作

Question

I have some angular code that is supposed to assign a class to only the parent element of the link clicked. 我有一些角度代码，应该为仅单击链接的父元素分配一个类。 This seems to work initially, but then after clicking around a bit, the code seems to get stuck. 最初似乎可行，但随后单击一下，代码似乎卡住了。 Here is some sample code of what I'm working with: 这是我正在使用的一些示例代码：

<div ng-repeat="item in items track by item.id" class="row" ng-class="{'active': selectItem.this == item.id}">
<a ng-click="selectItem.this = item.id">Move to top</a> {{item.name}}

$scope.selectItem = { this: -1 };

http://plnkr.co/edit/jhahff7OyVTVt615BBp3?p=preview http://plnkr.co/edit/jhahff7OyVTVt615BBp3?p=preview

Any help would be great! 任何帮助将是巨大的！

Answer 1

You just need to make the whole text a clickable DOM 您只需要使整个文本成为可点击的DOM

<div ng-repeat="item in items track by item.id" class="row" ng-class="{'active': selectItem.this == item.id}">
  <a ng-click="selectItem.this = item.id">Move to top <span ng-bind="item.name"></span></a> 
</div>

Answer 2

I replaced the a tag with p tag and bind an click event to the p tag. 我用p标签替换了a标签，并将click事件绑定到p标签。 With this refactoring, I don't see any lagging or weird behaviour. 通过这种重构，我看不到任何滞后或怪异的行为。

<body ng-controller="MainCtrl">
  <div ng-repeat="item in items track by item.id" class="row" 
       ng-class="{'active': selectItem.this == item.id}">
       <p style="cursor: pointer;" ng-click=selectedItem()>
           Move to top {{item.name}}
       </p> 
  </div>
</body>

In controller 在控制器中

$scope.selectItem = {};
$scope.selectedItem = function () {
  $scope.selectItem.this = this.item.id;
};

Let me know if you still see any issues. 让我知道您是否仍然有任何问题。

Angular Active ng-class无法正常工作

问题描述

2 个解决方案

解决方案1
0 2017-06-01 03:05:36

解决方案2
0 2017-06-01 03:53:37

Angular Active ng-class无法正常工作

问题描述

2 个解决方案

解决方案1 0 2017-06-01 03:05:36

解决方案2 0 2017-06-01 03:53:37

解决方案1
0 2017-06-01 03:05:36

解决方案2
0 2017-06-01 03:53:37