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