Angular bind from the controller to the input field

Question

HTML

<div ng-app="app" ng-controller="Example">
  <input type="number" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

Javascript

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = $scope.data[propertyName].toFixed(2);
    };
  });

I try to keep only two decimals.

I see two issues, the first one is that the number in the view does not change, although mainOdd1 does change. and the second one is that I get an error in the console about using the toFixed function.

What am I doing wrong here?

Thanks

toFixed() function retunrs string while youre input's type is number — Ruben Karapetyan
– Ruben Karapetyan, Commented Jul 14, 2016 at 8:23

Gayathri Mohan · Accepted Answer · 2016-07-14 08:23:52Z

1

Hi toFixed Error happening because of while converting toFIxed it will become String but your input type in number so it wont accept so u have to change to float

 $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = parseFloat($scope.data[propertyName].toFixed(2));
    };

answered Jul 14, 2016 at 8:23

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2016-07-14 08:27:18Z

0

Your input is type="number".You must use this

$scope.data = {
  'mainOdd1' : 0,
};

and can use step=0.01 for input in order to have only two decimals

answered Jul 14, 2016 at 8:27

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

1 Comment

A.S.F Studio Over a year ago

Hey, it's not giving me the same functionality. When I set ('mainOdd1' : 0) the place holder doesn't work at the beginning because mainOdd1 already equal to zero jsfiddle.net/wygy9s87/1. As for setting step to 0.01, it will only give me the invalid signal but that is not the behavior I want.

brk · Accepted Answer · 2016-07-14 08:29:59Z

0

The problem is with this line

$scope.data[propertyName].toFixed(2)

Use Unary plus to convert it to number

$scope.data[propertyName] = +$scope.data[propertyName].toFixed(2);

answered Jul 14, 2016 at 8:29

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Bowen Li · Accepted Answer · 2016-07-14 09:22:16Z

run the snippet to solve both of your issues:

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      $scope.data[propertyName] = parseFloat($scope.data[propertyName]).toFixed(2);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example">
  <input type="text" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

Collectives™ on Stack Overflow

Angular bind from the controller to the input field

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related