Angular active ng-class isn't working properly

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

Any help would be great!

Answer 1

You just need to make the whole text a clickable 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. 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 isn't working properly

Question

2 answers

solution1
0 2017-06-01 03:05:36

solution2
0 2017-06-01 03:53:37

Angular active ng-class isn't working properly

Question

2 answers

solution1 0 2017-06-01 03:05:36

solution2 0 2017-06-01 03:53:37

solution1
0 2017-06-01 03:05:36

solution2
0 2017-06-01 03:53:37