AngularJS中ng-repeat元素的单选功能实现

在AngularJS开发中，经常需要动态生成列表项，并为每个列表项添加点击事件以实现特定的功能，如单选操作。下面是一个简单的示例，展示了如何使用ng-repeat指令结合ng-click和自定义类来实现这一目标。

  {{ item.name }}

在上述HTML代码中，我们使用了ng-repeat指令来遍历items数组，并为每个生成的元素绑定了一个点击事件处理器selectItem(item)。同时，通过ng-class指令根据当前选中的项来动态设置类名，从而实现视觉上的选中效果。

接下来是控制器部分的代码：

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: '项目1' },
    { name: '项目2' },
    { name: '项目3' }
  ];
  $scope.selectedItem = null;

  $scope.selectItem = function(item) {
    if ($scope.selectedItem === item) {
      $scope.selectedItem = null; // 如果再次点击已选中的项，则取消选择
    } else {
      $scope.selectedItem = item;
    }
  };
});

在这个控制器中，我们首先定义了一个包含多个对象的数组items，每个对象代表一个列表项。变量selectedItem用于存储当前选中的列表项。当用户点击某个列表项时，会触发selectItem(item)函数，该函数检查当前点击的项是否已经是选中状态，如果是，则取消选择；如果不是，则将其设为新的选中项。

通过这种方式，我们可以轻松地在AngularJS应用中实现列表项的单选功能，提供更好的用户体验。