<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp" ng-controller='ctrl'>
<md-content>
<section layout="row">
<md-input-container>
<input type="text" ng-model="radioModel"></input>
</md-input-container>
</section>
<div layout="row">
<md-button ng-click="save('0')" class="md-raised md-primary left">left</md-button>
<md-button ng-click="save('1')" class="md-raised md-primary middle">middle</md-button>
<md-button ng-click="save('2')" class="md-raised md-primary right">right</md-button>
</div>
</md-content>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes 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];
};
});
/* Styles go here */
.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;
}