feat(buttons): add uib-uncheckable support

- Add support for `uib-uncheckable` with uib-btn-radio

Closes #3604
Closes #4791

Author: wesleycho

src/buttons/buttons.js

@@ -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'});
 
@@ -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 {

src/buttons/docs/demo.html

@@ -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>

src/buttons/docs/readme.md

@@ -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`
 

src/buttons/test/buttons.spec.js

@@ -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();
+      });
+    });
   });
 });