- Number +

by Jens Kühn

HTML

<div ng-controller="MainCtrl as ctrl">
    <div data-number-stepper=""
         data-name="kampagnenUmsetzung" data-id="kampagnenUmsetzung"
         data-ng-model="data.value"
         data-step="0.25" data-min="0"
         data-validator-group="effortGroup"
         data-validator="[quarterHourWatch]"
         data-tt-text="15 Minuten Hinweistext" data-tt-place="bottom"></div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>

JavaScript

(function () {
    function MainCtrl($scope, $compile) {
        var self = this;
        $scope.data = {
        	value: 0
        };
    }
    
    function numberStepper(){
      return {
          restrict: 'AE',
          replace: true,
          require: 'ngModel',
          scope: {
              step: '@',
              ngModel: '=',
              name: '@',
              id: '@',
              min: '@',
              max: '@',
              valid: '@',
              ttText: '@',
              ttPlace: '@'
          },


          template: function(scope){
              return '<div class="input-group number-spinner">' +
                  '<span class="input-group-btn data-dwn">' +
                      '<button class="btn btn-default btn-info" data-dir="dwn" ng-disabled="isOverMin(true)" ng-click="decrement()">' +
                          '<i class="fa fa-minus">-</i>' +
                      '</button>' +
                    '</span>' +
                        '<input type="number" class="form-control"' +
                        'name="{{name}}" id="{{id}}"' +
                        'step="{{step}}" min="{{min}}"' +
                        'data-ng-model="ngModel"' +
                        'validator="{{valid}}"' +
                        'tooltip="{{ttText}}" tooltip-placement="{{ttPlace}}" />' +
                    '<span class="input-group-btn data-up">' +
                      '<button class="btn btn-default btn-info" data-dir="up" ng-disabled="isOverMax(true)" ng-click="increment()">' +
                          '<i class="fa fa-plus">+</i>' +
                      '</button>' +
                    '</span>' +
                  '</div>';
          },


          link: function(scope, iElement, iAttrs, ngModelController) {

              scope.label = '';

              if (angular.isDefined(iAttrs.label)) {
                  iAttrs.$observe('label', function(value) {
                      scope.label = ' ' + value;
                     ...