AngularJS директива высоты счетчика

Question

То, что я пытаюсь достичь:
On -/+ нажмите кнопку Добавить или удалить дюйм от счетчика высоты и высоты дисплея в ножном дюймовом формате/(6'4")

.

Актуальные проблемы:.
При попытке редактировать Maikel Daloo Счетчик Директива в AngularJS проекта отображает пустую страницу

Любая помощь и совет будет полезным,
Спасибо

.

Первоисточник:http://maikeldaloo.com/post/angularjs-counter-directive
Plnkr:http://plnkr.co/edit/8mzg4QHKDHwgfSiy1XqL?p=preview

Директива:

fittingApp.directive('counter', function() { 
    return { 
     restrict: 'A', 
     scope: { value: '=value' }, 
     template: '<a href="javascript:;" class="counter-minus" ng-click="minus()">-</a><a href="javascript:;" class="counter-plus" ng-click="plus()">+</a><input type="text" class="counter-field" ng-model="value" ng-change="changed()" ng-readonly="readonly">', 
     link: function(scope , element , attributes) { 
      if (angular.isUndefined(scope.value)) { 
       throw "Missing the value attribute on the counter directive."; 
      } 
      var min = angular.isUndefined(attributes.min) ? null : parseInt(attributes.min); 
      var max = angular.isUndefined(attributes.max) ? null : parseInt(attributes.max); 
      var step = angular.isUndefined(attributes.step) ? 1 : parseInt(attributes.step); 
      element.addClass('counter-container'); 
      scope.readonly = angular.isUndefined(attributes.editable) ? true : false; 
      var setValue = function(val) { 
       scope.value = parseInt(val); 
      }; 
      setValue(scope.value); 
      scope.minus = function() { 
       if (min && (scope.value <= min || scope.value - step <= min) || min === 0 && scope.value < 1) { 
        setValue(min); 
        return false; 
       } 
       setValue(scope.value - step); 
      }; 
      scope.plus = function() { 
       if (max && (scope.value >= max || scope.value + step >= max)) { 
        setValue(max); 
        return false; 
       } 
       setValue(scope.value + step); 
      }; 
      scope.changed = function() { 
       if (!scope.value) setValue(0); 
       if (/[0-9]/.test(scope.value)) { 
        setValue(scope.value); 
       } 
       else { 
        setValue(scope.min); 
       } 
       if (min && (scope.value <= min || scope.value - step <= min)) { 
        setValue(min); 
        return false; 
       } 
       if (max && (scope.value >= max || scope.value + step >= max)) { 
        setValue(max); 
        return false; 
       } 
       setValue(scope.value); 
      }; 
     } 
    }; 
}); 

Контроллер:

fittingApp.controller('statsCtrl', ['$scope', function($scope) { 
    $scope.height = 3; 
    $scope.chest = 3; 
    $scope.waist = 3; 
    $scope.hips = 3; 
    $scope.thighs = 3; 
}]); 

HTML:

<h4>Height:</h4> 
<div counter min="0" value="height"></div> 
<h4>Chest:</h4> 
<div counter min="0" value="chest"></div> 
<h4>Waist:</h4> 
<div counter min="0" value="waist"></div> 
<h4>Hips:</h4> 
<div counter min="0" value="hips"></div> 
<h4>Thighs:</h4> 
<div counter min="0" value="thighs"></div> 

Дизайн:



развития:

Answer 1

Я думаю, сохранить значение с ounter как полный номер, то, когда вы показываете значение в футах/дюймах, вы должны использовать фильтр для выполнения преобразования.

Как и в случае с валютой в Angular, где у вас есть что-то вроде этого: {{всего | валюта}}.

Вы можете технически иметь что-то вроде выше. https://scotch.io/tutorials/building-custom-angularjs-filters

UPDATE:

Взгляните на этот файл - я добавил комментарий в каждом из файлов, чтобы сказать вам, какие новые биты я добавил.

http://plnkr.co/edit/YueSevu6YWI1RphoY7h3?p=preview

- Bumped the steps to 10, added a minimum of 100 
- Added an inches filter (basic one) 
- Set the counter fields as hidden 
- Placed value outside of the counter elements.