Min/Max Currency Field

Take a look at this jsbin

I have one field that is properly checking the range of the user's input. This is a number field.

I have another field that is changing the input into a currency format. This is a text field.

My issue is that I cannot do both of these ideas on one field. One field needs it to be text while the other requires it to be a number.

Is there something out there that can accomplish the marriage of both fields?

Solution

Instead of creating your own directive look into ng-currency: http://ngmodules.org/modules/ng-currency

<input type="text" model="yourModel" ng-currency min="1" max="1337" />

angular.module('myApp', ['ng-currency'])
  .controller('CurrencyController', function($scope) {
    $scope.myData = 8;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/aguirrel/ng-currency/master/src/ng-currency.js"></script>

<!-- PLEASE CHANGE AS YOU WISH THIS LOCALE JS -->
<script src="https://code.angularjs.org/1.4.3/i18n/angular-locale_es-us.js"></script>


<div ng-app="myApp" ng-controller="CurrencyController">
  <input type="text" ng-model="myData" ng-currency min="1" max="10" currency-symbol="$" /><br/>
  {{ myData }}
</div>