AngularJS：操作ng-repeat元素及自定义指令按钮组点击问题

嘿，我看你在做一个AngularJS的自定义按钮组部件，用ng-repeat生成按钮，但点击事件大概率没法准确获取到被点击的按钮信息对吧？我来给你梳理下解决方案，顺便修正几个小细节。

首先先把你现有的代码整理出来方便参考：

控制器中的配置：

$scope.btnGroup = [{"name":"toggle 1"},{"name":"toggle 2"}];

HTML部分：

<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
  <div ng-repeat="btn in setting" style="display:inline">
    <button class="btn btn-default" ng-bind="btn.name" ng-click="click()"></button>
  </div>
</div>

先修正一个小笔误 #

你ng-repeat里写的是btn in setting，但你的配置变量是btnGroup，这里得统一起来，要么把setting改成btnGroup，要么在控制器里把$scope.setting = $scope.btnGroup，不然按钮列表会渲染不出来哦。

核心问题：点击事件没有上下文 #

当前的ng-click="click()"没有传递任何关于当前按钮的信息，所以在控制器的click()方法里，你根本不知道用户点的是哪个按钮。解决这个问题很简单，只需要把当前按钮的上下文传进去就行。

方案1：直接传递当前按钮对象

修改HTML中的ng-click，把循环里的btn对象传进去：

<div ng-controller="toggleButtonController" ng-init="init()" id="parent">
  <div ng-repeat="btn in btnGroup" style="display:inline">
    <button class="btn btn-default" ng-bind="btn.name" ng-click="click(btn)"></button>
  </div>
</div>

然后在控制器里实现click方法，接收这个按钮对象：

app.controller('toggleButtonController', function($scope) {
  $scope.btnGroup = [{"name":"toggle 1"},{"name":"toggle 2"}];
  
  $scope.init = function() {
    // 这里放你的初始化逻辑
  };
  
  $scope.click = function(selectedBtn) {
    // 现在你能拿到被点击的按钮信息啦
    console.log('点击了按钮：', selectedBtn.name);
    // 这里可以写你的业务逻辑，比如触发弹窗、切换状态等等
  };
});

方案2：传递索引来区分按钮

如果你习惯用索引来定位按钮，也可以用ng-repeat内置的$index变量：

<button class="btn btn-default" ng-bind="btn.name" ng-click="click($index)"></button>

对应的控制器方法：

$scope.click = function(btnIndex) {
  var selectedBtn = $scope.btnGroup[btnIndex];
  console.log('点击了第', btnIndex + 1, '个按钮：', selectedBtn.name);
};

额外优化：给toggle按钮添加选中状态（可选） #

既然你的按钮叫toggle，大概率需要切换选中状态，那可以给每个按钮对象加个active属性来控制：

$scope.btnGroup = [{"name":"toggle 1", active: false},{"name":"toggle 2", active: false}];

然后修改HTML，动态绑定样式和点击逻辑：

<button class="btn btn-default" 
        ng-class="{'btn-primary': btn.active}" 
        ng-bind="btn.name" 
        ng-click="toggleBtn(btn)"></button>

控制器里的切换方法：

$scope.toggleBtn = function(selectedBtn) {
  // 如果需要单选（只能选一个按钮），就先把所有按钮设为未选中
  // $scope.btnGroup.forEach(btn => btn.active = false);
  
  // 切换当前按钮的状态
  selectedBtn.active = !selectedBtn.active;
  console.log('按钮「', selectedBtn.name, '」的状态变为：', selectedBtn.active ? '选中' : '未选中');
};

这样点击按钮时，按钮会自动切换成btn-primary样式，直观展示选中状态，完全符合toggle按钮的需求。

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