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>

在您的控制器中：

$scope.model = { selected : null };

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

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