angularjs – Angular.js如何更改元素css类点击和删除所有其他

发布时间：2020-12-17 09:02:49 所属栏目：安全来源：网络整理

导读：我试图让我的两个元素切换，所以如果一个元素被点击它将删除my-class的所有引用并应用于它的self。有任何想法吗？ span id="1" ng-style="my-class" ng-click="tog=my-class"/spanspan id="2" ng-style="my-class" ng-click="tog=my-class"/span 干杯! 创建

我试图让我的两个元素切换，所以如果一个元素被点击它将删除my-class的所有引用并应用于它的self。有任何想法吗？

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

干杯!

创建一个名为selectedIndex的scope属性和一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!