AngularJS技术问题：如何在ng-repeat中访问指定项

根据你给出的自定义指令和ng-repeat动态生成按钮的场景，我来梳理几种实用的方法，帮你轻松定位到循环里的指定项：

1. 通过数组索引直接访问 #

ng-repeat循环的源数据是setting数组，你可以直接在控制器里通过索引值获取目标项。比如要拿到第2个按钮对应的项（注意数组索引从0开始）：

// 在toggleButtonController控制器中
$scope.getTargetByIndex = function(index) {
  return $scope.setting[index];
};

// 使用示例：获取第1个按钮（索引0）
var firstBtn = $scope.getTargetByIndex(0);

如果要在模板里标记特定索引的项，还可以用ng-repeat自带的$index变量，比如给索引为1的按钮加特殊样式：

<button class="btn" 
        ng-bind="btn.name" 
        ng-click="click(btn)" 
        ng-class="{'special-btn': $index === 1, getClass(btn, toggleButton.selected)}">
</button>

2. 通过项的唯一属性匹配查找 #

如果你的btn对象有唯一标识（比如id、key这类属性），可以用数组的find方法精准定位：

// 在控制器中定义查找方法
$scope.getTargetById = function(targetId) {
  return $scope.setting.find(btn => btn.id === targetId);
};

// 使用示例：获取id为"btn_user_info"的项
var targetBtn = $scope.getTargetById("btn_user_info");

模板里也可以直接用这个逻辑做判断，比如给特定id的按钮默认选中：

<button class="btn" 
        ng-bind="btn.name" 
        ng-click="click(btn)" 
        ng-class="getClass(btn, toggleButton.selected)"
        ng-init="toggleButton.selected = btn.id === 'btn_user_info' ? btn : toggleButton.selected">
</button>

3. 利用ng-repeat的特殊变量快速访问首尾项 #

ng-repeat提供了几个内置变量，可以直接定位首尾或中间项：

• $first：当前项是否是循环的第一个
• $last：当前项是否是循环的最后一个
• $middle：当前项既不是第一个也不是最后一个

比如要在模板里给第一个按钮加标识：

<!-- 模板中给第一个按钮加特殊类 -->
<button class="btn" 
        ng-bind="btn.name" 
        ng-click="click(btn)" 
        ng-class="{'first-item': $first, getClass(btn, toggleButton.selected)}">
</button>

控制器里要拿最后一个项也很直接：

// 控制器中获取最后一个项
var lastBtn = $scope.setting[$scope.setting.length - 1];

4. 结合你的选中逻辑直接访问 #

从你的代码里看到有toggleButton.selected变量，这应该是用来标记当前选中的按钮项。如果你要访问当前选中的项，直接用这个变量就可以了：

// 获取当前选中的按钮项
var selectedBtn = $scope.toggleButton.selected;

如果要修改选中项，直接给这个变量赋值即可，ng-class会自动更新按钮样式。

额外小贴士 #

给ng-repeat加上track by可以提升性能，避免重复项问题，比如：

<div ng-repeat="btn in setting track by btn.id" style="display:inline">
  <!-- 按钮内容 -->
</div>

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