Angular.js如何单击更改元素CSS类并删除所有其他元素

Question

我正在尝试切换两个元素，因此如果单击一个元素，它将删除my-class的所有引用并将其应用于自身。有任何想法吗？

<span id="1" ng-style="my-class" ng-click="tog=my-class"></span>

<span id="2" ng-style="my-class" ng-click="tog=my-class"></span>

干杯!

Answer 1

创建一个名为selectedIndex的范围属性，以及一个itemClicked函数：

function MyController ($scope) {
  $scope.collection = ["Item 1", "Item 2"];

  $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection

  $scope.itemClicked = function ($index) {
    $scope.selectedIndex = $index;
  };
}

然后，我的模板将如下所示：

<div>
      <span ng-repeat="item in collection"
             ng-class="{ 'selected-class-name': $index == selectedIndex }"
             ng-click="itemClicked($index)"> {{ item }} </span>
</div>

仅供参考，$ index是ng-repeat指令中可用的不可思议的变量。

您也可以在指令和模板中使用相同的示例。

这是一个工作的plnkr：

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