AngularJS实现点击按钮切换Div选中/取消选中及全选切换功能

我来帮你搞定这个需求，咱们得调整下原来的代码，用AngularJS的数据绑定特性来实现，而不是直接操作DOM（这才是Angular的正确打开方式😉）。下面是完整的实现方案：

核心思路 #

1. 用数组管理每个Div的选中状态，每个Div对应一个对象，包含selected属性来标记是否选中
2. 用ng-class绑定边框样式，ng-show控制按钮的显示/隐藏，完全由数据驱动
3. 全选按钮通过切换全局的allSelected状态，同步更新所有Div的选中状态

完整代码实现 #

HTML部分

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl">
  <!-- 全选按钮 -->
  <button class="btn btn-default" ng-click="toggleAllSelect()">
    {{ allSelected ? '取消全选' : '全选' }}
  </button>

  <!-- 多个Div容器，用ng-repeat循环生成 -->
  <div 
    class="container" 
    ng-repeat="item in items track by $index"
    ng-class="{'selectedBorder': item.selected}"
    ng-click="toggleItemSelect(item)"
  >
    <button 
      class="btn btn-primary" 
      ng-show="!item.selected"
      ng-click="toggleItemSelect(item); $event.stopPropagation()"
    >
      ok
    </button>
  </div>
</div>

JavaScript控制器

function MainCtrl($scope) {
  // 初始化3个Div的状态（你可以根据需求调整数量）
  $scope.items = [
    { selected: false },
    { selected: false },
    { selected: false }
  ];
  $scope.allSelected = false;

  // 单个Div的选中/取消切换
  $scope.toggleItemSelect = function(item) {
    item.selected = !item.selected;
    // 同步更新全选按钮的状态（当所有Div都选中时，全选按钮自动变为"取消全选"）
    $scope.allSelected = $scope.items.every(item => item.selected);
  };

  // 全选/取消全选切换
  $scope.toggleAllSelect = function() {
    $scope.allSelected = !$scope.allSelected;
    $scope.items.forEach(item => {
      item.selected = $scope.allSelected;
    });
  };
}

CSS样式

.container{
  width: 30%;
  height: 100px;
  border: 1px solid black;
  margin: 2% 10%;
  position: relative; /* 让按钮居中更方便 */
  cursor: pointer; /* 提示可以点击 */
}

button.btn.btn-primary{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
}

.selectedBorder{
  border: 3px solid blue;
}

.btn.btn-default {
  margin: 10px 10%;
}

代码解释 #

• 状态管理：每个Div的选中状态存在items数组的对象里，避免了直接操作DOM，符合Angular的MVVM思想
• 事件处理：Div的点击事件和按钮的点击事件都绑定到toggleItemSelect，按钮点击时用$event.stopPropagation()阻止事件冒泡，避免触发Div的点击事件
• 全选逻辑：toggleAllSelect方法切换allSelected后，遍历所有item更新选中状态；同时单个item切换时，会检查所有item是否都选中，同步更新全选按钮的文本
• 样式优化：给Div加了cursor: pointer提示可点击，按钮用绝对定位+transform实现完美居中，调整了margin让布局更美观

这样就完全实现了你要的三个需求：

1. 首次点击Div内按钮：Div变蓝边框，按钮隐藏
2. 点击Div任意区域：取消选中，边框恢复，按钮显示
3. 全选按钮切换：一键选中/取消所有Div

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