如何将ng-repeat列表中点击激活的项移至列表顶部？

嗨，这事儿很好解决！咱们用AngularJS的指令结合数组操作就能搞定，具体分两步来：

1. 调整HTML结构，绑定事件与动态样式 #

先修改你的列表代码，加上点击事件、动态类绑定，还要补充track by $index避免数组元素位置变化后AngularJS的重复渲染问题：

<ul>
  <li ng-repeat="item in items track by $index" 
      ng-click="selectItem(item)"
      ng-class="{active: item === selectedItem}">
    <a href="">{{item.name}}</a>
  </li>
</ul>

• ng-click="selectItem(item)"：点击列表项时触发控制器里的选中函数，把当前项传进去
• ng-class="{active: item === selectedItem}"：判断当前项是否为选中项，是的话自动添加active类
• track by $index：因为我们会修改数组元素的位置，加这个能让AngularJS正确追踪每个元素，避免渲染报错

2. 在控制器中实现选中与移动逻辑 #

接下来在你的AngularJS控制器里编写selectItem函数，完成标记选中项和移至顶部的操作：

angular.module('yourAppName', [])
.controller('YourController', function($scope) {
  // 示例数据，替换成你自己的items数组即可
  $scope.items = [
    {name: '项目一'},
    {name: '项目二'},
    {name: '项目三'}
  ];
  
  $scope.selectedItem = null; // 存储当前选中的项

  $scope.selectItem = function(item) {
    // 第一步：标记当前选中项，用于绑定active类
    $scope.selectedItem = item;

    // 第二步：找到当前项在数组中的位置
    const itemIndex = $scope.items.indexOf(item);
    
    // 如果项不在顶部，就把它移到最前面
    if (itemIndex !== -1 && itemIndex !== 0) {
      // 先从原位置移除元素
      $scope.items.splice(itemIndex, 1);
      // 再将元素添加到数组开头
      $scope.items.unshift(item);
    }
  };
});

补充：如果列表项是后端返回的带ID对象 #

如果你的items是从后端获取的、每个元素带有唯一id的对象，建议用findIndex结合ID来定位元素，避免引用匹配的问题：

// 替换原来的indexOf部分
const itemIndex = $scope.items.findIndex(i => i.id === item.id);

这样操作后，点击任意列表项，它会立刻加上active类，同时自动跳到列表最顶部啦！

内容的提问来源于stack exchange，提问作者surazzarus