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

我试图让我的两个元素切换,所以如果一个元素被点击它将删除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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...