角材料中的按钮组答案

【问题标题】：Groups of buttons in angular-material角材料中的按钮组
【发布时间】：2015-04-17 16:45:41
【问题描述】：

我可以创建相同的功能吗 http://angular-ui.github.io/bootstrap/（章节：按钮（ui.bootstrap.buttons）

使用角度材料？

Angular-material 有单选按钮指令，但我不能使用它，因为我不希望标签左侧的“点”。

Angular-material 也有 select 指令，但功能不同。

我还有其他选择吗？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

@Bartłomiej 如文档中所述...截至 V 1.0.5 Grouping with CSS Overrides（一直向下滚动）。

您可以添加自定义类来覆盖主题并获得相同的结果。

@nitin，我检查了你的 Plunker，它缺少一些 CSS，例如文档中示例中的 CSS 作品，见下文，或查看我的 forked Plunker：

.md-button.left {
    border-radius: 10px 0 0 10px;
}
.md-button.middle {
    border-radius: 0;
    border-left: 1px solid rgba(230, 230, 230, 0.96);
    border-right: 1px solid rgba(230, 230, 230, 0.96);
}
.md-button.right {
    border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
    background-color: rgba(193, 193, 193, 0.96);
    color: rgba(44, 65, 164, 0.96);
    transition: 0.3s;
}

【讨论】：

【解决方案2】：

是的，您可以获得相同的功能。

Plunk：Done here

脚本：

 var app=angular.module('myApp',['ngMaterial'])
   .config(function($mdThemingProvider) {
     $mdThemingProvider.theme('primary')
    .primaryPalette('blue')
    .accentPalette('orange');
    })
    .controller('ctrl',function($scope){
        $scope.buttons={
          left:false,
          middle:false,
          right:false
         };
        var keys=Object.keys($scope.buttons);
        $scope.radioModel='middle';

        $scope.save=function(id){
            $scope.radioModel=keys[id];
        };

  });

HTML

 <section layout="row">
     <md-input-container>
       <input type="text" ng-model="radioModel"></input>
     </md-input-container>
 </section>
 <section layout="row">
  <md-button ng-click="save('0')" class="md-raised md-primary">left</md-button>
  <md-button ng-click="save('1')" class="md-raised md-primary">middle</md-button>
  <md-button ng-click="save('2')" class="md-raised md-primary">right</md-button> 
 </section>

【讨论】：

感谢您的解决方案