angularjs - Angular.js 如何在单击时更改元素 css 类并删除所有其他元素

Question

我正在尝试使我的两个元素切换，因此如果单击一个元素，它将删除我的类的所有引用并将其应用到其自身。有什么想法吗？

<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