求助：如何在AngularJS页面创建无间距的扁平(flat)按钮

我明白你在AngularJS项目里折腾无间距扁平按钮有多闹心——试过AngularJS Material没达到原型效果的话，确实容易卡壳。下面给你一套纯AngularJS+CSS的实现方案，完美匹配你要的无间距布局和选中状态效果：

HTML结构 #

<div ng-app="flatBtnApp" ng-controller="FlatBtnCtrl">
  <div class="btn-group">
    <button 
      class="flat-btn" 
      ng-class="{'active': selectedBtn === 'option1'}"
      ng-click="selectedBtn = 'option1'"
    >
      选项1
    </button>
    <button 
      class="flat-btn" 
      ng-class="{'active': selectedBtn === 'option2'}"
      ng-click="selectedBtn = 'option2'"
    >
      选项2
    </button>
  </div>
</div>

CSS样式 #

/* 按钮组容器：消除按钮间距 */
.btn-group {
  display: flex;
  border: 1px solid #ccc; /* 外层统一边框，避免按钮边框重叠 */
  border-radius: 4px; /* 可选，根据原型调整圆角 */
  overflow: hidden; /* 裁剪按钮超出容器的部分 */
}

/* 扁平按钮基础样式 */
.flat-btn {
  flex: 1; /* 按钮均分容器宽度 */
  padding: 8px 16px;
  border: none; /* 去掉默认按钮边框 */
  background-color: transparent;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* 按钮hover状态（可选，根据原型调整） */
.flat-btn:hover {
  background-color: #f5f5f5;
}

/* 选中状态样式 */
.flat-btn.active {
  background-color: #2196F3;
  color: #fff;
}

/* 去掉按钮默认聚焦边框（可选） */
.flat-btn:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(33, 150, 243, 0.5);
}

AngularJS控制器 #

angular.module('flatBtnApp', [])
.controller('FlatBtnCtrl', function($scope) {
  // 初始化选中状态，默认选中第一个按钮
  $scope.selectedBtn = 'option1';
});

关键实现细节说明 #

• 无间距布局：通过父容器的display: flex和overflow: hidden，配合按钮的flex: 1，让按钮完全贴合无间隙，外层统一边框避免按钮边框重叠的问题。
• 扁平风格：重置按钮默认的边框、背景，只保留必要的文字和交互样式，完全符合“扁平”设计要求。
• 选中状态控制：用AngularJS的ng-class动态绑定active类，通过ng-click切换selectedBtn变量，实现选中状态的实时更新。
• 可扩展性：如果需要更多按钮，只需要在.btn-group里添加新的<button>标签，修改对应的ng-click和ng-class值即可。

这个方案完全脱离AngularJS Material的限制，自定义程度更高，能100%匹配你的原型效果。你可以根据原型的颜色、尺寸需求，调整CSS里的background-color、padding、font-size等属性。

内容的提问来源于stack exchange，提问作者Nenad Bulatović