Added directive to add bootstrap button groups

This commit is contained in:
Mads Rasmussen
2015-06-01 13:17:41 +02:00
parent 5586e07329
commit 53ef8ce7f4
2 changed files with 51 additions and 0 deletions

View File

@@ -0,0 +1,39 @@
angular.module("umbraco.directives")
.directive('umbButtonGroup', function () {
return {
scope: {
actions: "=",
model: "="
},
restrict: 'E',
replace: true,
templateUrl: 'views/components/buttons/umb-button-group.html',
link: function (scope, element, attrs, ctrl) {
scope.primaryAction = {};
scope.secondaryActions = [];
function generateActions() {
for (var index = 0; index < scope.actions.length; index++) {
var action = scope.actions[index];
if( index === 0 ) {
scope.primaryAction = action;
} else {
scope.secondaryActions.push(action);
}
}
}
scope.$watch('actions', function(newValue, oldValue) {
if (newValue) {
generateActions();
}
});
}
};
});

View File

@@ -0,0 +1,12 @@
<div class="btn-group dropup">
<a class="btn btn-primary" href="#" ng-click="primaryAction.action(model)" prevent-default>{{ primaryAction.label }}</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" ng-if="secondaryActions.length !== 0"><span class="caret"></span></a>
<ul class="dropdown-menu" ng-if="secondaryActions.length !== 0">
<li ng-repeat="secondaryAction in secondaryActions">
<a href="" ng-click="secondaryAction.action(model)" prevent-default>{{ secondaryAction.label }}</a>
</li>
</ul>
</div>