javascript - Angularjs指令点击元素

Question

嗨，我想知道当我有来自 ng-repeat 的元素列表时，如何允许用户单击列表之一并通过 .css() 使其突出显示。那么，如果用户单击另一个元素，前一个元素会取消突出显示，而新单击的元素会突出显示？

谢谢

Answer 1

您可以尝试使用 ng-click 来设置所选项目，并使用 ng-class 应用条件 css 类:

<ul>
    <li ng-repeat="item in list" ng-class="{'highlight': model.selected == item}">
        <button ng-click="model.selected = item">Select</button>
    </li>
</ul>

在你的 Controller 中:

$scope.model = { selected : null };

我们需要使用一个对象来保存所选项目，以便 ng-repeat 的每个项目共享范围，否则，每个项目都会存在该范围，因此可以选择多个项目。

演示: http://plnkr.co/edit/EdrD7MvesW3xn9C9c6fk?p=preview