Angular Active ng-class無法正常工作

Question

我有一些角度代碼，應該為僅單擊鏈接的父元素分配一個類。 最初似乎可行，但隨后單擊一下，代碼似乎卡住了。 這是我正在使用的一些示例代碼：

<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

任何幫助將是巨大的！

Answer 1

您只需要使整個文本成為可點擊的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

我用p標簽替換了a標簽，並將click事件綁定到p標簽。 通過這種重構，我看不到任何滯后或怪異的行為。

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

在控制器中

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

讓我知道您是否仍然有任何問題。

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