Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

feat(buttons): add uib-uncheckable support #4791

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/buttons/buttons.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ angular.module('ui.bootstrap.buttons', [])
this.toggleEvent = buttonConfig.toggleEvent || 'click';
}])

.directive('uibBtnRadio', function() {
.directive('uibBtnRadio', ['$parse', function($parse) {
return {
require: ['uibBtnRadio', 'ngModel'],
controller: 'UibButtonsController',
controllerAs: 'buttons',
link: function(scope, element, attrs, ctrls) {
var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
var uncheckableExpr = $parse(attrs.uibUncheckable);

element.find('input').css({display: 'none'});

Expand All @@ -40,9 +41,15 @@ angular.module('ui.bootstrap.buttons', [])
});
}
});

if (attrs.uibUncheckable) {
scope.$watch(uncheckableExpr, function(uncheckable) {
attrs.$set('uncheckable', uncheckable ? '' : null);
});
}
}
};
})
}])

.directive('uibBtnCheckbox', function() {
return {
Expand Down
7 changes: 6 additions & 1 deletion src/buttons/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ <h4>Radio &amp; Uncheckable Radio</h4>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uncheckable>Right</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
</div>
<div>
<button class="btn btn-default" ng-click="uncheckable = !uncheckable">
Toggle uncheckable
</button>
</div>
</div>
4 changes: 4 additions & 0 deletions src/buttons/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ With the buttons directive, we can make a group of buttons behave like a set of
* `uncheckable`
_(Boolean attribute)_ -
Whether a radio button can be unchecked or not.

* `uib-uncheckable`
_(Default: null)_ -
An expression that evaluates to a truthy or falsy value that determines whether the `uncheckable` attribute is present

### Default settings `uibButtonConfig`

Expand Down
14 changes: 14 additions & 0 deletions src/buttons/test/buttons.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -322,5 +322,19 @@ describe('buttons', function() {
expect(btns.eq(1)).not.toHaveClass('active');
});
});

describe('uibUncheckable', function() {
it('should set uncheckable', function() {
$scope.uncheckable = false;
var btns = compileButtons('<button ng-model="model" uib-btn-radio="1">click1</button><button ng-model="model" uib-btn-radio="2" uib-uncheckable="uncheckable">click2</button>', $scope);
expect(btns.eq(0).attr('uncheckable')).toBeUndefined();
expect(btns.eq(0).attr('uncheckable')).toBeUndefined();

$scope.uncheckable = true;
$scope.$digest();
expect(btns.eq(0).attr('uncheckable')).toBeUndefined();
expect(btns.eq(1).attr('uncheckable')).toBeDefined();
});
});
});
});