从ng-repeat中单击时，向元素添加类

在AngularJS中，ng-repeat是一个非常常用的指令，用于遍历数组并在DOM中生成重复的元素。如果你想在点击某个元素时向它添加一个类，可以使用ng-class指令结合表达式来实现动态类的绑定。

基础概念

ng-repeat: AngularJS中的一个指令，用于遍历数组并在DOM中重复生成元素。
ng-class: AngularJS中的一个指令，用于动态地将一个或多个类名添加到元素上。

类型

表达式: 可以使用一个表达式来决定是否应用某个类。
对象: 可以使用一个对象字面量，键是类名，值是布尔表达式，当表达式为真时应用该类。
数组: 可以使用数组来组合多个类名或表达式。

应用场景

交互效果: 如点击按钮改变背景色。
状态指示: 如显示当前选中的项目。
条件渲染: 根据不同的条件显示不同的样式。

示例代码

假设我们有一个数组items，我们想要在点击某个项目时给它添加一个名为active的类。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <style>
        .active {
            background-color: yellow;
        }
    </style>
</head>
<body ng-controller="myController">
    <ul>
        <li ng-repeat="item in items" ng-class="{'active': item.isActive}" ng-click="toggleActive($index)">
            {{ item.name }}
        </li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.items = [
                { name: 'Item 1', isActive: false },
                { name: 'Item 2', isActive: false },
                { name: 'Item 3', isActive: false }
            ];

            $scope.toggleActive = function(index) {
                $scope.items[index].isActive = !$scope.items[index].isActive;
            };
        });
    </script>
</body>
</html>

解释

HTML部分:
- 使用ng-repeat遍历items数组。
- 使用ng-class指令，当item.isActive为真时添加active类。
- 使用ng-click指令绑定点击事件，调用toggleActive函数并传递当前项的索引。

JavaScript部分:
- 定义了一个AngularJS模块myApp和一个控制器myController。
- 在控制器中初始化了一个包含三个对象的数组items，每个对象都有一个name属性和一个isActive属性。
- toggleActive函数用于切换指定索引项的isActive状态。