javascript - AngularJS - 在单击时应用一个类并保持应用，或者在再次单击时删除

Question

我在 onclick 上将一个类应用于我的自定义元素，并且我想保持它的应用。就像有一堆<event>元素一样，当我单击其他元素时，前一个元素会丢失selected该类。也就是说，我无法一次将selected课程应用于多个课程。

这是我的视图代码：

<event class="event" ng-repeat="event in events" event="{{ event }}"
       ng-class="{'selected' : $index == selected}"
       ng-click="selectEvent($index, event)">
    {{ event }}
</event>

这是我的控制器

myApp.controller('MyCtrl', function ($scope, $http) {
    $scope.selectEvent = function($index, event) {
        $scope.selected = $index;
        console.log(event);
    }
});

此外，我还希望在<event>再次单击特定对象时删除该类。

Answer 1

您只有一条数据 ( $scope.selected) 跟踪选择。每次单击新元素时，都会覆盖先前的选择。

如果您希望每个事件具有单独的选择/未选择状态，则必须创建一个允许这样做的数据结构。

在这个小提琴中，我将事件定义为：

    $scope.events = [
        {name: 'event1', selected: false},
        {name: 'event2', selected: false},
        {name: 'event3', selected: false}
    ];

而且我认为它可以按您的预期工作。