feat(timepicker): add showSpinner flag

- Add optional `showSpinner` flag support
angular-ui · Jun 4, 2015 · 1f760eb · 1f760eb
1 parent d631af5
commit 1f760eb
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
@@ -35,3 +35,7 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  * `arrowkeys`
     _(Defaults: true)_ :
      Whether user can use up/down arrowkeys inside the hours & minutes input to increase or decrease it's values.
+
+ * `show-spinners`
+    _(Defaults: true)_ :
+     Shows spinner arrows above and below the inputs
diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
@@ -7,7 +7,8 @@ angular.module('ui.bootstrap.timepicker', [])
   meridians: null,
   readonlyInput: false,
   mousewheel: true,
-  arrowkeys: true
+  arrowkeys: true,
+  showSpinners: true
 })
 
 .controller('TimepickerController', ['$scope', '$attrs', '$parse', '$log', '$locale', 'timepickerConfig', function($scope, $attrs, $parse, $log, $locale, timepickerConfig) {
@@ -258,7 +259,10 @@ angular.module('ui.bootstrap.timepicker', [])
     selected.setHours( dt.getHours(), dt.getMinutes() );
     refresh();
   }
-
+
+  $scope.showSpinners = angular.isDefined($attrs.showSpinners) ?
+    $scope.$parent.$eval($attrs.showSpinners) : timepickerConfig.showSpinners;
+
   $scope.incrementHours = function() {
     addMinutes( hourStep * 60 );
   };

diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
@@ -1,26 +1,26 @@
 <table>
-	<tbody>
-		<tr class="text-center">
-			<td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
-			<td>&nbsp;</td>
-			<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
-			<td ng-show="showMeridian"></td>
-		</tr>
-		<tr>
-			<td class="form-group" ng-class="{'has-error': invalidHours}">
-				<input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
-			</td>
-			<td>:</td>
-			<td class="form-group" ng-class="{'has-error': invalidMinutes}">
-				<input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
-			</td>
-			<td ng-show="showMeridian"><button type="button" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
-		</tr>
-		<tr class="text-center">
-			<td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
-			<td>&nbsp;</td>
-			<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
-			<td ng-show="showMeridian"></td>
-		</tr>
-	</tbody>
+  <tbody>
+    <tr class="text-center" ng-show="showSpinners">
+      <td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+      <td>&nbsp;</td>
+      <td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+      <td ng-show="showMeridian"></td>
+    </tr>
+    <tr>
+      <td class="form-group" ng-class="{'has-error': invalidHours}">
+        <input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
+      </td>
+      <td>:</td>
+      <td class="form-group" ng-class="{'has-error': invalidMinutes}">
+        <input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
+      </td>
+      <td ng-show="showMeridian"><button type="button" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
+    </tr>
+    <tr class="text-center" ng-show="::showSpinners">
+      <td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+      <td>&nbsp;</td>
+      <td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+      <td ng-show="showMeridian"></td>
+    </tr>
+  </tbody>
 </table>