独家选择列表元素

时间:2014-10-17 14:40:27

标签: javascript angularjs

我有一个无序列表:

<ul>
    <li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 1</li>
    <li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 2</li>
    <li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 3</li>
</ul>

我想将一个类应用于用户选择的列表项。一次只能有一个项目。接近这个最好的角度方法是什么?大约有十几个元素,所以我宁愿不为每个项目声明一个新变量。

2 个答案:

答案 0 :(得分:2)

为每个项目设置属性:

<ul>
    <li ng-class="{ 'active': selected == 1 }" ng-click="selected = 1">Stuff 1</li>
    <li ng-class="{ 'active': selected == 2 }" ng-click="selected = 2">Stuff 2</li>
    <li ng-class="{ 'active': selected == 3 }" ng-click="selected = 3">Stuff 3</li>
</ul>

答案 1 :(得分:2)

如果你想要角度使用ng-repeat

HTML

<ul ng-repeat="s in stuffs">
    <li ng-class="{active:$index==selected}" ng-click="selected=$index">{{s}}</li>
</ul>

JS

$scope.stuffs = ['Stuff 1', 'Stuff 2', 'Stuff 3'];