Angular Range Example

Two-way binding between number input and range input.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-controller="CalcCtrl">
  {{num}}
  <br> {{filtered}}
  <br> {{euros}}
  <br>

</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.filter('customCurrency', function() {

  return function(input, symbol, place) {

    // Ensure that we are working with a number
    if (isNaN(input)) {
      return input;
    } else {

      // Check if optional parameters are passed, if not, use the defaults
      var symbol = symbol || 'EUROS';
      var place = place === undefined ? true : place;

      // Perform the operation to set the symbol in the right location
      if (place === true) {
        return symbol + input;
      } else {
        return input + symbol;
      }

    }
  }

});

myApp.controller('CalcCtrl', function($scope, $filter) {
  $scope.num = 122212111221121212;
  $scope.filtered = $filter('currency')($scope.num);
  $scope.euros = $filter('customCurrency')($scope.num);
});