Указатель счетчика высоты AngularJS

0

То, что я пытаюсь достичь:
Вкл. - + щелчок - добавьте или удалите дюйм от счетчика высоты и высоту дисплея в формате foot/inch (6'4 ").

Текущие проблемы:
При попытке отредактировать директиву Maikel Daloo Counter, проект 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>

Дизайн:

Изображение 174551

Разработка:

Изображение 174551

  • 0
    Есть ли какие-либо ошибки в консоли при запуске отредактированной директивы?
  • 0
    Теперь, когда я вернулся к директиве Maikel Daloo по умолчанию, снова отображаются высота, грудь, талия, бедра и бедра, и вы можете нажать - / +, чтобы добавить и удалить цифры, но высота не работает как футы и дюймы ...
Показать ещё 2 комментария
Теги:
angularjs-directive
angularjs-controller

1 ответ

0
Лучший ответ

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

валюта}}.

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

ОБНОВИТЬ:

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

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.
  • 0
    Посмотрите на обновленный ответ.
  • 0
    Спасибо, Майкель, я очень ценю все дополнительные комментарии и советы. Я быстро издевался над Plnkr вместе, вы могли бы просмотреть и сообщить мне, правильно ли я все реализовал! plnkr.co/edit/I1s24nojfkuHAw6FSzEF?p=preview
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню