Формат с угловой директивой

Попытка изучить AngularJS (v 1.x) и иметь некоторые проблемы с тем, как наилучшим образом подойти к сценарию, который у меня есть.Формат с угловой директивой

Я хочу иметь возможность отображать элемент управления ввода html для пользователя, который позволяет им вводить процентные ставки%. В базе данных я хочу сохранить значение как десятичное без форматирования (например, 0,25 для 25%), но в пользовательском интерфейсе я хочу отображать 25%. Если пользователь вводит значение во вход, я хочу, чтобы они могли ввести его как 25 (без%) и иметь данные, отправленные в базу данных как .25 (т. Е. ... без проверки подлинности бэкэнд в «формат», просто подтверждение значения находится в допустимом диапазоне 0-1). На основе всех примеров, которые я видел в Интернете до сих пор, пользовательская директива - лучший способ приблизиться к этому. Я создал простую директиву, которая работает для выполнения большинства моих требований, но она не отображает%, если пользовательская рука вводит значение и покидает поле. Он просто остается 25. Я создал простой Fiddle, который показывает это поведение.

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

Вот код для полноты:

HTML

<body ng-app="app" ng-controller="ctrl"> 
    <input my-directive name="test" ng-model="item" placeholder="Type in a percentage as a whole #..." style="display:block;width:100%;"> 
    <button type="button" ng-click="item = .25">Set model to "25%"</button></br> 
    <label>Value:</label> 
    <span ng-bind="item"></span> 
</body>

Javascript

angular.module("app", []); 

angular.module("app").controller("ctrl", function($scope){ 
$scope.item = '.49'; 

$scope.$watch('item', function(newVal, oldVal){ 
    if (newVal !== oldVal){ 
     console.log(newVal); 
    } 
}); 
}); 

angular.module("app").directive("myDirective", function(){ 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, controller) { 
     controller.$parsers.push(function (data) { 
      //convert data from view format to model format 

      if (data) { 
       return data/100; 
      } 
      else { 
       return 0; 
      } 
     }); 

     controller.$formatters.push(function (data) { 
      //convert data from model format to view format 
      if (data) { 
       return (data * 100).toFixed(3).toString() + "%"; 
      } 
      else 
      { 
       return "0.000%"; 
      } 
     }); 
    } 
}; 
});

источник

2016-07-14 user1011627

Похоже, подобный вопрос к http://stackoverflow.com/questions/11380866/angularjs-how-to-force-an-input-to-be-re -приведенный-на-размытие; кажется, что принятый ответ (или конечный результат в исходном вопросе) должен делать то, что вы хотите. – mrusinak

Спасибо mrusinak .... работал отлично. – user1011627

app.js

loanProposalApp.directive('renderOnBlur', renderOnBlur);

renderOnBlur.js

var renderOnBlur = ['CONFIG', function (CONFIG) { 
    var controllerFunc = ['$scope', function ($scope) { 

    }]; 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, elm, attrs, ctrl) { 
      elm.bind('blur', function() { 
       var viewValue = ctrl.$modelValue; 
       for (var i in ctrl.$formatters) { 
        viewValue = ctrl.$formatters[i](viewValue); 
       } 
       ctrl.$viewValue = viewValue; 
       ctrl.$render(); 
      }); 
     } 
    }; 
}];

источник

2016-07-14 21:17:32 user1011627

Формат с угловой директивой

ответ

Смежные вопросы