AngularJS - 在单击时应用类并保持应用，或在再次单击时将其删除

AngularJS - Apply a class onclick and keep it applied, or remove when clicked again

本文关键字：应用 单击 删除 AngularJS      更新时间：2023-09-26

我正在将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>时删除该类。

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

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

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

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

我认为它按照您的预期工作。

相关文章：